CSS实现带阴影效果的三角形

左手的ㄟ右手 2022-06-13 10:22 515阅读 0赞

### 目标效果 ###

用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。  
但是如果要求三角形边缘具有阴影效果，这样一来以前的实现方式显然是不行，因为box-shadow属性对border内部的边缘是没有效果的。  
今天公司的交互图上正好要实现这种效果，经过一番搜寻和思考，最终通过一种在原来的方式上稍作升级的方式实现了这一效果。  
实现的关键就是给border-top和border-right两个三角形同时设置颜色，将两个小三角形融合成一个大的三角形，然后通过transform进行旋转操作，将盒模型原本的两条边作为三角形的腰，对外展示，再对其设置box-shadow效果，实现阴影效果。

### 具体实现 ###

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>CSS实现带阴影效果的三角形</title>
      <style> .box { position: relative; width: 600px; height: 400px; background: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 2px #ccc; } .box:after { position: absolute; display: inline-block; top: 380px; left: 300px; width: 0; height: 0px; content: ''; border-style: solid; border-width: 20px; border-color: #fff #fff transparent transparent; transform: rotate(135deg); box-shadow: 2px -2px 2px #ccc; } </style>
    </head>
    <body>
      <div class="box">
      </div>
    </body>
    </html>

### 运行结果 ###

![带阴影效果的三角形][SouthEast]

[SouthEast]: /images/20220613/fb6b680fd15d4485ad1977392199e823.png

发表评论取消回复

表情：

评论列表（有 0 条评论，515人围观）

还没有评论，来说两句吧...

相关阅读

相关 css阴影效果

CSS可以用来创建各种阴影效果，这些效果可以应用于文本、元素或整个容器。以下是一些常见的CSS阴影效果示例：文本阴影： .text-shadow \{ text-sha

￡神魔★判官ぃ/ 2024年03月03日 08:46/ 0 赞/ 133 阅读

相关 css实现div阴影效果

.shadow { -webkit-box-shadow: b2b2b2 4px -2px 30px 8px; ; -moz

青旅半醒/ 2023年02月20日 15:57/ 0 赞/ 16 阅读

相关微信小程序css卡片样式（带阴影效果）

微信小程序`css`卡片样式（带阴影） `效果图` ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_

浅浅的花香味﹌/ 2022年12月21日 02:28/ 0 赞/ 748 阅读

相关 css文字底部阴影效果

今天要实现一个文字的阴影效果，大概是这个样子的 ![在这里插入图片描述][2020092216472561.png_pic_center] 代码如下： <!DO

￡神魔★判官ぃ/ 2022年12月09日 13:59/ 0 赞/ 357 阅读

相关 CSS 边框阴影效果

\shadow1\{ width: 200px; height: 100px; color: white; background-color: red

川长思鸟来/ 2022年09月27日 13:28/ 0 赞/ 343 阅读

相关 css3-文本阴影效果、凹凸效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

短命女/ 2022年07月14日 00:43/ 0 赞/ 318 阅读

相关 CSS实现带阴影效果的三角形

目标效果用将width和height设置为0，通过border特性来实现三角形的效果的方法，想必很多人都实现过。但是如果要求三角形边缘具有阴影效果，这样一来以前的

左手的ㄟ右手/ 2022年06月13日 10:22/ 0 赞/ 516 阅读

相关 CSS3实现三角形效果

原文：[Magic of CSS border property][] 译文：不可思议的CSS border属性译者：dwqs 在CSS中，其border属性有很多的规

Bertha 。/ 2022年06月12日 22:38/ 0 赞/ 381 阅读

相关用CSS3实现阴影效果

任务描述本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。效果如下： ![198693][] 相关知识为了完成本关任务，你需要掌握：1.外阴影，2.多行

叁歲伎倆/ 2022年04月04日 12:09/ 0 赞/ 463 阅读

相关 css如何实现字体长阴影效果

css如何实现字体长阴影效果,text-shadow 属性向文本设置阴影。

小灰灰/ 2020年05月18日 06:34/ 0 赞/ 907 阅读