html - 如何在CSS中制作倒三 Angular 形轮廓

Question

我想知道是否可以用 CSS 实现这种设计？我正在考虑在文本之后创建一个 div 或 span 元素，并使其成为一个只有两个彩色边框的框，然后将其旋转 45 度？否则，我正在考虑只使用图像 Sprite 。

Answer 1

您可以像这样使用 CSS:

.caret.caret-reversed {
  border-bottom: 10px solid #000000;
  border-left: 6px solid rgba(0, 0, 0, 0);
  border-right: 6px solid rgba(0, 0, 0, 0);
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: top;
  width: 0;
  transform: rotate(180deg);
}

<span class="caret caret-reversed"></span>

为您的解决方案将 border-bottom 颜色更改为 #fff。

或者还有另一种使用伪类的方法:

body {
  background-color: #003;
  font-family: verdana;
  font-size: 10pt;
}
a {
  color: #003;
  background-color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  position: relative;
  z-index: 2;
  border: 1px solid #f33;
}
a:after,
a:before {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
a:after {
  border-color: transparent;
  border-top-color: #fff;
  border-width: 5px;
  margin-left: -5px;
}
a:before {
  border-color: rgba(0, 0, 51, 0);
  border-top-color: #003;
  border-width: 6px;
  margin-left: -6px;
}

<a href="#" class="link">Performance</a>