How to create a triangular shape with curved border? - css

Question

I want to do this shape using CSS not as an image can I but I get the green shape and I can't get the all background transparent !
#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

You can do it with some perspective and rotation:
.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>
Another idea with skew transformation:
.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

my best (for the moment...)
.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>