css加三角阴影,三角形与使用CSS阴影(triangle with shadow using css)

最新推荐文章于 2025-05-06 15:44:17 发布

知乎营销

最新推荐文章于 2025-05-06 15:44:17 发布

阅读量437

点赞数

文章标签： css加三角阴影

本文介绍使用纯CSS实现带有阴影效果的三角形方法，通过多种CSS属性如box-shadow、rotate等，创建出立体感强的3D三角形，并提供多个示例及在线演示链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

.caret-bottom

{

display: inline-block;

width: 0;

height: 0;

vertical-align:top;

content: "";

border-top: 9px solid #FFFFFF;

border-right: 7px solid transparent;

border-left: 7px solid transparent;

margin-top: 13px;

margin-left: 4px;

}

HTML代码

我需要的阴影下侧为这个三角形就像一个3D效果。

Answer 1:

.triangle { width: 100px; height: 100px; position: relative; overflow: hidden; box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5); } .triangle:after { content: ""; position: absolute; width: 50px; height: 50px; background: #999; -webkit-transform: rotate(45deg); top: 75px; left: 25px; box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5); }

DEMO

http://jsfiddle.net/w9Zgc/

Answer 2:

喜后是有点老，但有我用了一个例子。链接到演示与代码。

.triangle { position: relative; background-color: white; opacity: 0.7; text-align: left; } .triangle:before, .triangle:after { content: ''; position: absolute; background-color: inherit; } .triangle, .triangle:before, .triangle:after { width: 7em; height: 7em; border-top-right-radius: 30%; } .triangle { transform: rotate(-90deg) skewX(-30deg) scale(1, .866); } .triangle:before { transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%); } .triangle:after { transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%); } .triangle { filter: drop-shadow(4px 7px 10px rgb(0, 0, 0)); -webkit-filter: drop-shadow(4px 7px 10px rgb(0, 0, 0)); }

Answer 3:

试试这个，我认为它会帮助你

.caret-bottom { display: inline-block; width: 0; height: 0; content: ""; border-top: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; position: relative; } .caret-bottom:before { width: 0; height: 0; content: ""; border-top: 10px solid #000; border-right: 10px solid transparent; border-left: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; z-index: 1; top: -12px; left: -10px; }

文章来源: triangle with shadow using css