正如您在示例中所看到的,如果您熟悉阴影三角形技术,它仅适用于正交三角形。
任何熟悉阴影等腰或任何三角形的人?
即使svg可以接受,也不一定是相同的方法。 没有光栅。
感谢您的帮助。
.ortho{
top: 400px;
left:-300px;
transform: rotate(135deg)
}
.isosceles{
top: 40px;
left:40px;
}
.triangle{
position: relative;
}
.triangle:after{
width: 0;
height: 0;
position: absolute;
content: "\0020";
border: 40px solid;
transform-origin: 0 0;
box-sizing: border-box;
box-shadow: -3px 3px 3px 0 rgba(0, 0, 0, 0.3);
border-color: transparent transparent #bada55 #bada55;
}
.isosceles:after{
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 68px 40px;
border-color: transparent transparent #dadada transparent;
}
<div class="triangle ortho"></div>
<div class="triangle isosceles"></div>
答案 0 :(得分:2)
你可以使用第二个伪模糊它:
/* added */
.triangle:before {
content: '';
-webkit-filter: blur(2px);
filter: blur(2px);
width: 0;
height: 0;
left: -2px;
top: -4px;
position: absolute;
content: "\0020";
border: 43px solid;
transform-origin: 0 0;
box-sizing: border-box;
border-color: transparent transparent #000 #000;
}
.isosceles:before {
content: '';
position: absolute;
-webkit-filter: blur(2px);
filter: blur(2px);
left: -1px;
top: -1px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 41px 70px 41px;
border-color: transparent transparent #000 transparent;
}
/* end added */
.ortho {
top: 400px;
left: -300px;
transform: rotate(135deg)
}
.isosceles {
top: 40px;
left: 40px;
}
.triangle {
position: relative;
}
.triangle:after {
width: 0;
height: 0;
position: absolute;
content: "\0020";
border: 40px solid;
transform-origin: 0 0;
box-sizing: border-box;
border-color: transparent transparent #bada55 #bada55;
}
.isosceles:after {
width: 0;
height: 0;
border-style: solid;
border-width: 0 40px 68px 40px;
border-color: transparent transparent #dadada transparent;
}
<div class="triangle ortho"></div>
<div class="triangle isosceles"></div>
答案 1 :(得分:0)
我使用html5做了类似的事情
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");
var width = 300; // Triangle Width
var ht = 360; // Triangle ht
var pd = 95;
c.beginPath();
c.moveTo(pd + width / 2, pd);
c.lineTo(pd + width, ht + pd);
c.lineTo(pd, ht + pd);
c.closePath();
c.shadowBlur = 100;
c.shadowColor = "lime";
c.fillStyle = "#444488";
c.fill();
c.beginPath();
c.moveTo(pd + width / 2, ht + pd);
c.lineTo(pd + width, pd);
c.lineTo(pd, pd);
c.closePath();
c.shadowBlur = 100;
c.shadowColor = "yellow";
c.fillStyle = "#222244";
c.fill();
};
&#13;
#myCanvas {
border: 22px solid fuchsia;
}
&#13;
<canvas align-="center" border="yellow" id="myCanvas" width="500" height="500">Browser not suitable for HTML5.</canvas>
&#13;