有没有办法用 CSS 为内部带有文本的几何形状创建内部阴影?
我使用了这个线程中的代码:Required pentagon shape with right direction CSS and HTML
如果形状由一个 div 和一个三 Angular 形组成 - 我可以只为 div 设置内部阴影。但即使我也可以为三 Angular 形设置阴影,它们之间的边界也会变得可见。
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>
如果我使用 swg,我可以使用 box-shadow 创建一个内部阴影,但表格的三 Angular 形部分不会转换阴影。而且在这种情况下,改变这个形状的比例也不是很方便。
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;
}
<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>
最佳答案
由于 box-shadow 只能应用在一侧或所有侧,所以我尝试让它具有多个背景。
您可以更改这些值以获得适合您的尺寸。
.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;
}
<div class="pentagon">
<div class="content">
PUT YOUR CONTENT HERE
</div>
<div class="pentagon-pointer"></div>
</div>
这是一个 JSfiddle也可以试试。
关于html - 如何为内部带有文字的几何形状创建内部阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39059524/