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>

Css 有边三角形

Css Bordered Triangle

html

css

css-shapes