用css制作形状奇特的元素
用css制作形状奇特的元素
提问于 2017-07-22 09:26:18
我正在尝试制作一个形状奇特的对话框，形状就像下面的链接(没有摇摆的尾巴)。我曾考虑过通过polyfill来实现，但这最终使元素变得太大。我想也许我可以使用伪元素，但我不认为我可以在效果后面放置一个阴影，并且只有两个伪元素的奇形怪状的顶部/底部。
我能想到的最好的方法是将多个div嵌套在主top中，并用absolute定位它们，然后手动设置top，但我想知道是否有更简单的方法来做到这一点。
如果我想做一个这样的div，并在里面写东西而不被切断，我应该怎么做呢？
Stack Overflow用户
回答已采纳
发布于 2017-07-22 10:04:15
使用透视图和转换绝对定位伪类的单个元素可能看起来就像这样。
div {
position: relative;
display: inline-block;
color: white;
margin: 3em;
perspective: 250px;
}
div::before, div::after {
content: '';
position: absolute;
z-index: -1;
top: -1em;
left: -1.5em;
right: -2em;
bottom: -1em;
background: black;
padding: 2em 3em .5em .5em;
transform: rotateX(180deg) rotateY(15deg) rotate(1.5deg) skewX(25deg);
}
div::before {
background: white;
top: -1.5em;
left: -2.25em;
right: -2.75em;
bottom: -1.75em;
transform: rotateX(180deg) rotateY(15deg) skewX(35deg);
}
body {
background: red;
}<div>i know kung foo</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45249742
复制相关文章
相似问题
腾讯云开发者
