Css有界三角形

Question

我正在开发一个需要特定元素的项目.这是一个如下图所示的边界三角形.甚至可以在HTML/CSS中创建此对象.

简单三角形只有直边框

.tri {
  display: inline-block;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 80px solid blue;
}

<div class="tri"></div>

Answer 1

这可以通过SVG实现,这可能是您的最佳选择.

<svg width="150px" height="100px" viewbox="0 0 10 10" preserveAspectRatio="none">
  <path d="M5,0 Q8,3 8,8 Q5,10 2,8 Q2,3 5,0" fill="skyblue"></path>
</svg>

可以使用伪元素创建替代方法,但这是实现所需内容的非常脏的方式.

div {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 40px solid skyblue;
  border-bottom-right-radius: 40px;
  border-bottom-left-radius: 40px;
}
div::before {
  content: '';
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid skyblue;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
  left: 5px;
  top: 13px;
  transform: rotate(120deg);
}
div::after {
  content: '';
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 25px solid skyblue;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  width: 0;
  height: 0;
  position: absolute;
  left: 10px;
  top: 13px;
  transform: rotate(-120deg);
}

<div></div>