Machen Sie eine Pfeilform mit CSS einschließlich Text

Question

Ich muss eine Pfeilform einschließlich Text machen. Ich habe viele Formen und Pfeile auf dem Stapelüberlauf gesehen, konnte aber diese Form nicht finden. Kann mir bitte jemand helfen?

Answer 1

Sie können es von pseudo elements wie before und after mit unter

ich gepostet und Arbeitsbeispiel.

.box { 
 
    width: 200px; 
 
    height: 50px; 
 
    background: tomato; 
 
    text-align: center; 
 
    color: #fff; 
 
    font-size: 13px; 
 
    position: relative; 
 
    display: table; 
 
} 
 

 
.box span { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.box:before, 
 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
} 
 

 
.box:after { 
 
    border-left: 25px solid tomato; 
 
    border-right: 25px solid transparent; 
 
    border-top: 25px solid transparent; 
 
    border-bottom: 25px solid transparent; 
 
    right: -50px; 
 
    top: 0px; 
 
    width: 0; 
 
    height: 0; 
 
    display: block; 
 
} 
 

 
.box:before { 
 
    border-left: 26px solid white; 
 
    border-right: 26px solid transparent; 
 
    border-top: 26px solid transparent; 
 
    border-bottom: 26px solid transparent; 
 
    left: 0px; 
 
    top: -1px; 
 
    width: 0; 
 
    height: 0; 
 
    display: block; 
 
}

<div class="box"> 
 
    <span>Hello</span> 
 
</div>