Wie mache ich ein Randdreieck mit CSS?

Question

Wie man ein Grenzdreieck erstellt?

Das einzige, was ich mir vorstellen kann, dies zu machen, ist ein Dreieck

.triangle { 
     width: 0; 
     height: 0; 
     border-left: 15px solid transparent; 
     border-right: 15px solid transparent; 
     border-bottom: 20px solid #8e8e8e; 
    } 

Aber das ist ein gefülltes Dreieck zu machen, ist es eine Möglichkeit, es so aussehen zu lassen wie das Dreieck erstreckt der Rahmen

Answer 1

Ein :after oder :before Element, das absolut Positionen an der Unterseite des div.

.box { 
 
    position: relative; 
 
    background-color: #F00; 
 
    border: 1px solid #000; 
 
    width: 50px; 
 
    height: 50px; 
 
} 
 

 
.box:after { 
 
    content: ""; 
 
    width: 16px; 
 
    height: 16px; 
 
    position: absolute; 
 
    background-color: #FFF; 
 
    bottom: -8px; /* half of the elements width/height */ 
 
    left: 50%; 
 
    transform: translateX(-50%) rotate(45deg); 
 
    border-bottom: 1px solid #000; 
 
    border-right: 1px solid #000; 
 
}

<div class="box">

ich das :after Element weiß gemacht haben, so können Sie sehen, was in ihm geschieht.

Answer 2

Sie müssen das Dreieckselement in das Unterlayout verschieben. Ich habe mehr Dreieck für das Grenzdesign hinzugefügt.

.balon { 
 
    width: 350px; 
 
    height: 120px; 
 
    border: 5px solid #2C6DBF; 
 
    margin: 50px auto; 
 
    position: relative; 
 
    border-radius: 8px; 
 
} 
 
.balon::after, .balon::before { 
 
    width: 0; 
 
    height: 0; 
 
    content: ''; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 21px solid #fff; 
 
    position: absolute; 
 
    bottom: -19px; 
 
    right: 0; 
 
    left: 0; 
 
    margin: auto; 
 
} 
 
.balon::before { 
 
    border-left-width: 20px; 
 
    border-right-width: 20px; 
 
    border-top-width: 25px; 
 
    border-top-color: #2C6DBF; 
 
    bottom: -25px; 
 
}

<div class="balon"> 
 
    
 
</div>