HTML中的SVG字形
HTML中的SVG字形
提问于 2018-05-03 15:54:44
我有几个SVG字形，我需要用HTML绘制。
有没有可能用CSS创建HTML，让它看起来像SVG？我的问题是箭头的阴影。
回答 2
Stack Overflow用户
发布于 2018-05-03 16:28:03
您可以对箭头(以及它的阴影)使用clip-path，对带有重叠框的图形使用带有box-shadow的伪元素
标记
<div class="arrow">Arrow</div>
<div class="boxes">Boxes</div>Css
.arrow {
height: 55px;
width: 250px;
position: relative;
line-height: 55px;
padding: 0 35px;
}
.arrow::before, .arrow::after {
content: "";
display: block;
height: inherit;
width: inherit;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background: #666;
clip-path: polygon(0 0, 25px 50%, 0% calc(100% - 5px), 85% calc(100% - 5px), 100% 50%, 85% 0);
}
.arrow::after {
transform: translate(5px, 5px);
opacity: .25;
}
.boxes, .boxes::before, .boxes::after {
position: relative;
background: #f2f2f2;
height: 180px;
width: 180px;
border-color: #999;
border-style: solid;
border-width: 1px;
border-top-width: 2px;
border-right-width: 2px;
box-shadow: 3px 4px 0 #ccc;
}
.boxes::before, .boxes::after {
content: "";
position: absolute;
display: block;
}
.boxes::after { top: -12px; left: 4px; z-index: -1; }
.boxes::before { top: -20px; left: 14px; z-index: -2; }另外两个图形可以用相同的方法得到(它们只是简单地改变了大小和颜色)
结果
Stack Overflow用户
发布于 2018-05-03 16:31:54
以下是其中一个形状：
body{
padding:20px;
}
div {
position:relative;
display: inline-block;
background: red;
position:relative;
padding: 9px;
padding-right: 22px;
}
div:before {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent red transparent transparent;
position: absolute;
left: -15px;
top: 1px;
}
div:after {
content: "";
border-style: solid;
border-width: 17px 15px 17px 0px;
border-color: transparent white transparent transparent;
position: absolute;
left: 93px;
top: 0px;
}<div class="triangle">Hello world </div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50149735
复制相关文章
相似问题
腾讯云开发者
