Question

.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>

Answer 1

只要您使用CSS渐变，您就不一定需要伪元素，因为所有支持渐变的浏览器也支持多个背景：

＆＃13;

=DEC2BIN(AGGREGATE(14,6,BIN2DEC(A2:A8+0),1))

＆＃13;

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;
}

＆＃13;

Answer 2

定义clip-path将为您提供预期的结果。

clip-path CSS属性创建一个定义内容的剪裁区域应显示元素的一部分。里面的那些部分显示区域，而外部隐藏。剪辑 region是指定为内联或引用的URL的路径外部SVG，或形状，如圆（）。

clip-path - CSS | MDN

＆＃13;

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);
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

进一步阅读：
Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box（粉碎杂志）

注意：
这是一项实验性技术，在生产中实施之前，请仔细检查跨浏览器的兼容性和支持。

跨浏览器兼容性＆amp;支持概述：

caniuse.com

clip-path - CSS | MDN

Answer 3

这不是你实际要求的。如果我错了，请纠正我。您要求一个气泡，其宽度增加父容器的高度。这个答案不是这种情况。但我觉得这是理想的效果。

不是将元素旋转45％，而是使用两个伪元素和线性背景来产生气泡效果。

宽度是固定的，可根据您的需要进行设置。但泡沫本身就是任何动态内容的高度。

＆＃13;

.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%);
}

＆＃13;

<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>

＆＃13;

Answer 4

像这样更新您的代码

<!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>

如何在纯CSS中使伪元素具有相同的高度和宽度？

4 个答案: