Question

我正在尝试在CSS中创建this shape。我没能完美地完成它。

Answer 1

检查一下，我已经完成了:before伪类。我们可以调整以下代码段，使其看起来像您需要的那样：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent #f00;
}

.triangle:before {
  display: block;
  content: " ";
  position: absolute;
  height: 100px;
  width: 10px;
  left: 3px;
  top: 8px;
  background: #fff;
  border-radius: 100%;
}

<div class="triangle"></div>

另一次尝试：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 86.6px;
  border-color: transparent transparent transparent #f00;
}

.triangle:before {
  display: block;
  content: " ";
  position: absolute;
  height: 180px;
  width: 110px;
  left: -90px;
  top: -30px;
  background: #fff;
  border-radius: 200%;
}

<div class="triangle"></div>

Answer 2

此解决方案依赖于CSS生成的内容，这意味着没有额外的标记。唯一需要注意的是，::after背景颜色必须与父元素背景颜色匹配。

div::before {
content:'';
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 50px 0 50px 100px;
border-color: transparent transparent transparent #007bff;
}

div::after{
content:'';
display:block;
width:50px;
background:#fff;
height:100px;
position:absolute;
border-radius:0 100% 100% 0;
transform: scaleX(0.4);
transform-origin:top left;
}

Demo here

如何制作带凹面左边框的div三角形？

2 个答案: