Erstellen eines div mit einer spitzen Seite

Question

Ich möchte ein div mit einem Bild und Text in, der so aussieht.

Ich habe es geschafft, etwas zu bekommen, die hier wie folgt aussieht:

JSFiddle of pointed div

.triangle-down { 
 
    background: white; 
 
    display: inline-block; 
 
    height: 125px; 
 
    margin-left: 20px; 
 
    margin-bottom: 55px; 
 
    position: relative; 
 
    width: 200px; 
 
    cursor: pointer; 
 
    border: red solid 2px; 
 
    } 
 
    img { 
 
    margin: 10px; 
 
    } 
 
    .triangle-down:before { 
 
    border-top: 20px solid red; 
 
    border-left: 101px solid transparent; 
 
    border-right: 101px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    left: -1px; 
 
    position: absolute; 
 
    top: 127px; 
 
    width: 0; 
 
    } 
 
    .triangle-down:after { 
 
    border-top: 20px solid white; 
 
    border-left: 100px solid transparent; 
 
    border-right: 100px solid transparent; 
 
    content: ""; 
 
    height: 0; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 125px; 
 
    width: 0; 
 
    }

<div class="triangle-down"> 
 
    <img src="http://placehold.it/180x105"> 
 
</div>

Die Fragen, die ich habe, sind:

(1) Der Cursor wird zu einem Zeiger außerhalb der Form, wenn er die transparenten Grenzen kreuzt, die zur Erstellung des Punkts beitragen. Ich würde es bevorzugen, wenn der Zeiger nur innerhalb des sichtbaren Umrisses der Form erscheint.

(2) Gibt es einen besseren Weg, dies zu tun? Ich habe versucht, ein div zu drehen, um den Punkt zu erzeugen, da ich dachte, dass dies das Problem des Zeigers lösen würde, aber ich kann nicht herausfinden, wie man eine gleichschenklige Dreiecksform mit den richtigen Proportionen auf diese Weise erzeugt. Dies würde mir auch erlauben, einen Rahmen anzuwenden, um den Umriss zu erstellen, anstatt zwei Dreiecke wie in JSFiddle zu überlagern. Sehen Sie diesen Beitrag für mehr dazu - Speech bubble with arrow

Answer 1

Hier ist eine Version transform: rotate

/*Down pointing*/ 
 
.triangle-down { 
 
    background: white; 
 
    display: inline-block; 
 
    height: 125px; 
 
    margin-left: 20px; 
 
    margin-bottom: 55px; 
 
    position: relative; 
 
    width: 200px; 
 
    cursor: pointer; 
 
    border: red solid 2px; 
 
} 
 
img { 
 
    position: relative; 
 
    margin: 10px; 
 
    z-index: 1 
 
} 
 
.triangle-down:before, 
 
.triangle-down:after { 
 
    border-bottom: 2px solid red; 
 
    background: white; 
 
    content: ''; 
 
    height: 50px; 
 
    left: 5px; 
 
    position: absolute; 
 
    top: 98px; 
 
    width: 54%; 
 
    transform: rotate(22deg); 
 
    z-index: 0; 
 
} 
 
.triangle-down:after { 
 
    left: auto; 
 
    right: 5px; 
 
    transform: rotate(-22deg); 
 
}

<div class="triangle-down"> 
 
    <img src="http://placehold.it/180x105"> 
 
</div>