CSS绘制带阴影三角形示例：边框与transform方法比较

188 浏览量更新于2024-08-30 收藏 75KB PDF 举报

本文主要介绍了如何使用CSS绘制带有阴影的三角形，并探讨了两种常见方法：边框法和transform旋转法。首先，作者指出许多在线提供的解决方案可能存在不足，特别是在实现阴影效果时。 1. 边框法： - HTML结构中，创建一个`<div>`元素用于三角形的制作，例如： ```html <body> <div class="box"></div> </body> ``` - CSS样式中，通过`.box`选择器定义元素尺寸、颜色和基础样式，然后使用`:after`伪元素创建三角形： ```css .box { position: relative; width: 200px; height: 100px; background: #ff8605; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2); } .box::after { content: ''; position: absolute; bottom: -9px; left: 45px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #ff8605; } ``` - 缺点是这种方法无法直接为三角形设置阴影，阴影效果实际上是盒子的一部分。 2. transform旋转法： - 使用`:before`伪元素，通过`transform: rotate(45deg)`和调整位置创建旋转的三角形： ```css .box::before { position: absolute; bottom: -5px; left: 45px; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.1); transform: rotate(45deg); } ``` - 这种方法更灵活，能更好地控制阴影效果，因为阴影是独立于三角形本身的。然而，作者强调，虽然这两种方法在某些场景下可能满足需求，但对于严谨的前端工程师来说，可能还需要寻找更精确的方法来实现带阴影的三角形，特别是当阴影效果要求更为精细时。这提示读者可能需要进一步研究CSS3的高级特性或者使用JavaScript辅助来实现更复杂的阴影效果。本文提供了两种基础的CSS技巧，为初学者和有一定经验的开发者提供了一个实用的起点。

用用CSS画一个带阴影的三角形的示例代码画一个带阴影的三角形的示例代码

1. 思路思路

怎么用CSS画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一

些问题

假设我们做一个向下的三角形箭头常见的方法大致有两种

通过边框控制, border-left和border-right设为透明, border-top设为预定的颜色即可

通过 transform 旋转盒子

方法一可以画三角形, 但是画阴影是很难做到的(如果做到的朋友, 欢迎给我留言)

2. 设计设计

2.1 边框法边框法

html结构

<body>

</body>

css样式

.box {

position: relative;

width: 200px;

height: 100px;

background: #ff8605;

box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);

}

.box::after {

content: '';

position: absolute;

bottom: -9px;

left: 45px;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid #ff8605;

}

缺点很明显, 我们不能通过box-shadow的方式来设置阴影, 阴影会是一个盒子

但如果不用设阴影, 只是需要边框的话, 我们可以再定义一个伪类元素, 覆盖到三角形的下面即可

.box::before {

position: absolute;

bottom: -10px;

left: 45px;

content: '';

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 10px solid rgba(0, 0, 0, .1);

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38694674

粉丝: 6
资源: 971

CSS绘制带阴影三角形示例：边框与transform方法比较

纯CSS实现网页图标：三角形、暂停按钮、加号与更多

CSS+SVG实例：B站风格充电动画与蒙版制作

20个实用CSS技巧：黑白图像、无界菜单与阴影效果

css实现三角形及应用示例

基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果

用CSS制作三角形和按钮的简单实例

纯 Css 绘制扇形的方法示例

css做一个3D房子.rar

JS+CSS实现一个气泡提示框

纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）

最新资源