如何创建带有弯曲边框的三角形？

Question

我想使用CSS而不是图像来实现这种形状，但是我得到了绿色的形状，并且我无法使所有背景透明！

#arrowbox:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 128, 0, 0);
    border-right-color: #008000;
    border-width: 25px;
    margin-top: -25px;
}

Answer 1

您可以通过一些透视和旋转来做到这一点：

.box {
  margin:20px;
  padding:20px calc(50% - 100px); /* this will fix the max width to 2x100px */
  /* the horizontal lines (one on each side)*/
  background:
    linear-gradient(red,red) left,
    linear-gradient(red,red) right;
  background-size:calc(50% - 100px) 2px;
  background-repeat:no-repeat;
  /* */
  text-align:center;
  position:relative;
}
.box::before,
.box::after{
  content:"";
  position:absolute;
  top:-10px; /* lower than 0 to avoid the overlap due to rotation */
  /* same as the padding */
  left:calc(50% - 100px); 
  right:calc(50% - 100px);
  /* */
  bottom:50%;
  border:3px solid red;
  border-bottom:none;
  border-radius:15px 15px 0 0;
  /* adjust here to control the shape  */
  transform:var(--s,scaley(1)) perspective(40px) rotateX(25deg);
  /* */
  transform-origin:bottom;
}
.box::after {
  --s:scaley(-1);
}

<div class="box"> some text here</div>


<div class="box"> more and more <br> text here</div>

<div class="box"> even more <br> and more <br> text here</div>

具有偏斜变换的另一个想法：

.box {
  margin:20px;
  padding:20px calc(50% - 100px); /* this will fix the max width to 2x100px */
  /* the horizontal lines (one on each side)*/
  background:
    linear-gradient(red,red) left,
    linear-gradient(red,red) right;
  background-size:calc(50% - 100px) 2px;
  background-repeat:no-repeat;
  /* */
  text-align:center;
  position:relative;
}
.box::before,
.box::after,
.box span::before,
.box span::after{
  content:"";
  position:absolute;
  top:0;
  left:calc(50% - 100px); 
  right:50%;
  bottom:50%;
  border:2px solid red;
  border-bottom:none;
  border-right:none;
  border-radius:10px 0 0 0;
  transform:var(--s,scaleX(1)) skew(-35deg);
  transform-origin:right bottom;
}
.box::after {
  --s:scalex(-1);
}
.box span::before {
  --s:scaleY(-1);
}
.box span::after {
  --s:scale(-1);
}

<div class="box"><span></span> some text here</div>


<div class="box"><span></span> more and more <br> text here</div>

<div class="box"><span></span> even more <br> and more <br> text here</div>

Answer 2

我最好的（目前...）

.corn6 {
  border-top: 1px solid darkblue;
  border-bottom: 1px solid darkblue;
  width: 200px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  position: relative;
  margin-left: 30px;
}
.corn6::before,
.corn6::after {
  display: block;
  position: absolute;
  top:0;
  width: 20px;
  height: 20px;
  border-top: 1px solid darkblue;
  border-right: 1px solid darkblue;
  content:'';
}
.corn6::before {
  left: 4px;
  transform: translateX(-50%) rotate(225deg) translateY(-5px) 
} 
.corn6::after {
  right: -4px;
  transform: translateX(50%) rotate(45deg) translateY(5px) 
} 

<div class="corn6"> text </div>