.speech
的高度可能会有所不同,因此寻找使 .speech::after
的宽度与 .speech
的宽度相同的解决方案高度。
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>
最佳答案
你不一定需要伪元素,只要你使用 CSS 渐变,因为所有支持渐变的浏览器也支持多背景:
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>
关于html - 如何在纯CSS中使伪元素具有相同的高度和宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47285379/