Question

我正在尝试创建一个看起来像>的CSS三角形而没有左侧。我使用div属性在:after上执行此操作，我知道我可以添加> content: ''样式，但是我想使用三角形我对诸如大小和比例等事情有了更多的控制。

话虽如此，这就是我所拥有的：

HTML

<div></div>

CSS

content:"";
position: absolute;
right: 10px;
top: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 30.5px 0 30.5px 50px;
border-color: transparent transparent transparent #007bff;
line-height: 0px;
z-index: 999;
}

我已尝试删除和修改border-width和border-color样式以删除该平面尺寸，但似乎无法让我看起来像

这只能用CSS吗？

JSFiddle

Answer 1

这应该适合你。

＆＃13;

div {
  width: 50%;
  height: 100px;
  margin: 0 auto;
  position: relative;
}
div:before,
div:after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-color: orange;
  border-width: 6px 6px 0 0;
}
div:before {
  transform: rotate(-135deg);
  left: 0;
}
div:after {
  transform: rotate(45deg);
  right: 0;
}

＆＃13;

<div></div>

＆＃13;

没有＆＃39;创建CSS三角形＆＃39;？

1 个答案: