有没有办法为内部带有文字的几何形状创建内部阴影,用CSS制作?
我使用了此主题中的代码:Required pentagon shape with right direction CSS and HTML
如果形状由div和三角形组成 - 我可以仅为div设置内部阴影。但即使我也可以为三角形设置阴影,它们之间的边界也会变得可见。
div {
position: relative;
width: 125px;
height: 150px;
background: #4275FF;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
div:after {
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 75px solid transparent;
border-bottom: 75px solid transparent;
border-left: 25px solid #4275FF;
right: -25px;
}

<div></div>
&#13;
如果我使用swg,我可以使用box-shadow创建一个内部阴影,但是表单的三角形部分不会投射阴影。而且在这种情况下,改变这种形状的比例并不是很方便。
div {
width: 150px;
height: 150px;
background: #4275FF;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
&#13;
<svg width="150" height="150">
<defs>
<clipPath id="shape">
<path d="M0,0 h125 l25,75 l-25,75 h-125z" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="100%" height="100%">
<div></div>
</foreignObject>
</svg>
&#13;
答案 0 :(得分:0)
由于盒子阴影只能在一侧或全部应用,我尝试使用多个背景。
您可以更改值以获得适合您的尺寸。
.pentagon {
background: linear-gradient(to right,black -3px, transparent 7px),
linear-gradient( black -3px, transparent 7px),
linear-gradient(to top , black -3px, transparent 7px),
#4275FF;
width: 200px;
height: 200px;
position: relative;
/* box-shadow: inset 0 0 10px #000000; */
z-index: 10; /* put it higher in the stacking order */
padding: 15px;
box-sizing: border-box;
}
.pentagon::before {
content: '';
position: absolute;
width: 140px;
height: 20px;
top: 47px;
right: -112px;
background: linear-gradient(black -4px, transparent 7px);
transform: rotate(45deg);
z-index: 2;
}
.pentagon::after {
content: "";
position: absolute;
bottom: 47px;
width: 140px;
height: 20px;
right: -112px;
background: linear-gradient(black -4px, transparent 7px);
transform: rotate(135deg);
z-index: 2;
}
.pentagon-pointer {
display: block;
position: absolute;
top: 0;
right: -98px;
border-left: 98px solid #4275FF;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
z-index: 1;
}
&#13;
<div class="pentagon">
<div class="content">
PUT YOUR CONTENT HERE
</div>
<div class="pentagon-pointer"></div>
</div>
&#13;
此处还有JSfiddle尝试。