Pseudo-Element mit :: vor dem Überlauf Element des übergeordneten Elements

Question

Plunker-Code ist here.

Ich versuche eine Sprechblase zu erstellen, deren obere und untere Ecken die gleichen wie die Ecken des Elternelements sind.

Pseudo Elementstützen sind,

.callout::before { 
     box-sizing: border-box; 
     height: 100%; 
     content: ""; 
     position: absolute; 
     right: -0.2em; 
     padding: 1em; 
     background: inherit; 
     border: inherit; 
     border-right: 0; 
     border-bottom: 0; 
     transform: rotate(45deg); 
     z-index: -1; 
    } 

Ich sehe Probleme,

1) pseudo Element abgeschnitten ist nicht auf der Höhe des übergeordneten Elements

2) Pseudoelement nicht genau von dem Ursprung oben, rechte Ecke des Elternelements

Es sieht so aus,

Wie kann man das beheben?

Answer 1

Angenommen, das übergeordnete Element hat die Höhe x. Da Sie das Element ::before verwenden, um den Pfeil anzuzeigen, indem Sie es auf 45deg drehen, sollte die Diagonale des Pfeils gleich der Höhe des übergeordneten Elements sein. Die Formel von Diagonal ist side * sqrt(2). So

x = side * sqrt(2) 

=> side = x/sqrt(2) 

Unter der Annahme, x = 50, dann wird side35.35534 sein. So gelten die gleichen in Ihrer Geige:

div { 
    width: 100px; 
    height: 50px; 
    background: tomato; 
    position: relative; 
} 

div::before { 
    content: ""; 
    display: block; 
    width: 35.35534px; 
    height: 35.35534px; 
    background: blue; 
    position: absolute; 
    transform: rotate(45deg); 
    transform-origin: 0 0; 
    left: 100%; 
} 

Besser wäre mit einem CSS-Präprozessor wie SASS zu gehen. Hier ist der Code, wo ich Sass verwendet habe, um das Ergebnis zu erhalten.

Working Fiddle