用纯css实现一个三角形

border实现:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style type="text/css">

.left{

width:0px;

height:0px;

border-top:50px solid rgba(0,0,0,0);

border-right:50px solid rgba(0,0,0,0);

border-bottom:50px solid blue;

border-left:50px solid rgba(0,0,0,0);

}

</style>

</head>

<body>

<div class="left"></div>

</div>

</body>

</html>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个CSS实现一片渐变叶子的例子: HTML代码: ```html <div class="leaf"></div> ``` CSS代码: ```css .leaf { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid #5cb85c; background: linear-gradient(to bottom, #5cb85c 0%, #4cae4c 100%); position: relative; transform: rotate(45deg); } .leaf:before { content: ""; position: absolute; top: -25px; left: -25px; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid #5cb85c; transform: rotate(-45deg); } .leaf:after { content: ""; position: absolute; top: -25px; left: 25px; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid #4cae4c; transform: rotate(45deg); } ``` 解释: 这个例子中,我们使用了三个伪元素来实现一片叶子的效果。其中,主要的叶子元素是一个长方形,通过`border`属性来定义了其形状。我们使用了`linear-gradient`属性来实现渐变效果,从上到下从浅绿色渐变到深绿色。通过`transform`属性的`rotate`函数,我们将叶子旋转了45度。 接下来,我们使用了两个伪元素,分别在叶子的左上角和右上角创建了两个三角形,用于填补叶子的两个角落。这两个三角形也是通过`border`属性来定义的,同样使用`transform: rotate()`函数来旋转至正确的位置。 最终的效果如下图所示: ![渐变叶子效果](https://cdn.jsdelivr.net/gh/0xAiKang/CDN/pictures/gradient-leaf.png)

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值