Wie kann ein Pseudo-Element in reinem CSS die gleiche Höhe und Breite erhalten?

Die .speech Höhe kann variieren, daher auf der Suche nach einer Lösung .speech::after 's Breite gleich .speech' s Höhe.Wie kann ein Pseudo-Element in reinem CSS die gleiche Höhe und Breite erhalten?

ideale Ergebnis

body { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.speech { 
 
    width: 250px; 
 
    padding: 1rem; 
 
    background-color: tomato; 
 
    color: white; 
 
    border: 1px solid; 
 
    position: relative; 
 
} 
 

 
.speech::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    border: 3px solid deepskyblue; 
 
    height: 100%; 
 
    padding-left: 50%; 
 
    background: linear-gradient(45deg, transparent 50%, green 0%); 
 
    transform: translateX(-50%) rotate(45deg); 
 
}

<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>

Quelle

2017-11-14 Muhammed

Sie wollen grundsätzlich '. Speech: after' zu einem Quadrat mit einer Kante Länge der 'Speech's Höhe? – user3154108

Sind Sie sicher, dass Sie eine zunehmende Breite der Seiten der Blase haben wollen? Oder ist Ihr Ident, dass dieses Element so hoch wie das Bubble-Elternelement ist, aber die Kerbe immer vertikal zentriert ist? Also: feste Breite Kerbe mit variabler Höhe? –

@ user3154108 Ich brauche 'Speech's Höhe für' Speech: nach 's Breite – Muhammed

Aktualisieren Sie Ihren Code wie dieser

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0, width=device-width;" /> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="description" content=""> 
    <link rel="shortcut icon" href="favicon.ico" /> 
    <meta name="author" content=""> 

    <style> 

body { 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.speech { 
    width: 250px; 
    padding: 0px; 
    background-color: tomato; 
    color: white; 
    border: 1px solid; 
    position: relative; 
} 

.speech::after { 
    content: ''; 
    position: absolute; 
    width: 0; 
    height: 0; 
    top:0px; 
    left:100%; 

} 

</style> 
</head> 

<body> 

<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem. Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script> 
$(document).ready(function() { 
    var ht = $(".speech").height(); 
    var ht1 = ht/2; 
    $("head").append($('<style>.speech:after { border-top: '+ht1+'px solid transparent; border-bottom: '+ht1+'px solid transparent; border-left: '+ht1+'px solid green;}</style>')); 
}); 
</script> 

</body> 

</html>

Quelle

2017-11-14 12:30:46

Antworten sollten eine Erklärung haben. –

@Ajeesh KH sucht nach Lösung in reinem CSS – Muhammed

ein clip-path definieren geben Sie das gewünschte Ergebnis.

Die CSS-Eigenschaft clip-path erstellt einen Ausschneidebereich, der definiert, welcher Teil eines Elements angezeigt werden soll. Die Teile, die sich innerhalb der Region befinden, werden angezeigt, während die äußeren Bereiche ausgeblendet sind. Die Clipping-Region ist ein Pfad, der entweder als URL angegeben wird, der auf Inline verweist, oder externen SVG, oder als Form, z. B. als circle().

clip-path - CSS | MDN

var addText = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem."; 
 

 
jQuery('.add-text').on('click', function(){ 
 
    jQuery('.alt-speech').append(addText); 
 
});

body { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; /* for the sake of demonstration */ 
 
} 
 

 
.speech { 
 
    width: 250px; 
 
    padding: 1rem; 
 
    background-color: tomato; 
 
    color: white; 
 
    border: 1px solid; 
 
    position: relative; 
 
} 
 

 
.speech::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    border: 3px solid deepskyblue; 
 
    height: 100%; 
 
    padding-left: 50%; 
 
    background: linear-gradient(45deg, transparent 50%, green 0%); 
 
    transform: translateX(-50%) rotate(45deg); 
 
} 
 

 
/* Additional */ 
 

 
.alt-speech { 
 
    width: 250px; 
 
    padding: 1rem; 
 
    background-color: tomato; 
 
    color: white; 
 
    border: 1px solid; 
 
    position: relative; 
 
} 
 

 
.alt-speech:after { 
 
    content: ""; 
 
    width: 50%; 
 
    background: tomato; 
 
    -webkit-clip-path: polygon(0 0, 0% 100%, 30% 50%); 
 
    clip-path: polygon(0 0, 0% 100%, 30% 50%); 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 100%; 
 
    position: absolute; 
 
} 
 

 
.add-text { 
 
    transition: .7s; 
 
    color: white; 
 
    background: tomato; 
 
    padding: 10px 20px; 
 
    cursor: pointer; 
 
} 
 

 
.add-text:hover { 
 
    background: #c12a0f; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="add-text">Add Text</div> 
 

 
<div style="margin: 20px 0px"></div> 
 

 
<div class="alt-speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>

Weiterführende Literatur:
Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box (Smashing Magazine)

HINWEIS:
Dies ist eine experimentelle Technologie, die die Kompatibilität und Unterstützung von Cross-Browsern vor der Implementierung in der Produktion sorgfältig überprüft.

Cross-Browser-Kompatibilität & Support Überblick:

Quelle

2017-11-14 13:37:39 UncaughtTypeError

Danke für deine Antwort, leider unterstützt der 'clip-path' nicht IE11 & even Edge :-( – Muhammed

Dies ist nicht das, was Sie tatsächlich gefragt. Also korrigiere mich bitte, wenn ich falsch liege. Sie haben nach einer Blase gefragt, die mit der Höhe des übergeordneten Containers wächst. Dies ist bei dieser Antwort nicht der Fall. Aber ich fühle, dass dies der gewünschte Effekt ist.

Anstatt ein Element um 45% zu drehen, werden zwei Pseudoelemente und lineare Hintergründe verwendet, um einen Blaseneffekt zu erzielen.

Die Breite ist fest und kann nach Ihren Bedürfnissen festgelegt werden. Aber die Blase selbst folgt der Höhe eines dynamischen Inhalts.

.speech { 
 
    width: 250px; 
 
    padding: 1rem; 
 
    background-color: tomato; 
 
    color: white; 
 
    border: 1px solid; 
 
    position: relative; 
 
} 
 

 
.speech::before, 
 
.speech::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 100%; 
 
    right: 0; 
 
    top: 0; 
 
    width: 45px; 
 
    height: 50%; 
 
} 
 

 
.speech::before { 
 
    background: linear-gradient(to top right, tomato 50%, transparent 50%); 
 
} 
 

 
.speech::after { 
 
    top: 50%; 
 
    background: linear-gradient(to bottom right, tomato 50%, transparent 50%); 
 
}

<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div> 
 

 
<div class="speech">Very small</div> 
 

 
<div class="speech"> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</p> 
 
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</p> 
 
</div>

Quelle

2017-11-14 13:47:19

Sie müssen nicht unbedingt Pseudo-Elemente für diese benötigen, so lange wie Sie CSS-Gradienten verwenden, da alle Browser, die Steigungen auch mehrere Hintergründe unterstützen unterstützen:

body { 
 
    min-height: 100vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.speech { 
 
    width: 250px; 
 
    padding: 1rem; 
 
    background: linear-gradient(tomato,tomato), 
 
       linear-gradient(to top right, tomato 49%,transparent 51%), 
 
       linear-gradient(to bottom right, tomato 49%,transparent 51%); 
 
    background-size: calc(100% - 30px) 100%, 30px 50%, 30px 50%; 
 
    background-position: 0 0, 100% 0, 100% 100%; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    border: 1px solid; 
 
    position: relative; 
 
}

<div class="speech">Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis minima possimus, maxime, fugit dolorum optio, tempora et doloribus doloremque ullam inventore repellendus veniam modi quasi iusto numquam amet eos! Exercitationem.</div>

Quelle

2017-11-14 13:53:22

Es ist 2017 und ich muss mich noch an mehrere Hintergründe gewöhnen; D ... Schön. –

Wie kann ein Pseudo-Element in reinem CSS die gleiche Höhe und Breite erhalten?

Antwort

Verwandte Themen