作者：手机用户2602883667 | 来源：互联网 | 2023-01-08 21:10
的.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);
}
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.
1> Ilya Strelts..：
您不一定需要伪元素,只要您使用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;
}
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.
京公网安备 11010802041100号