巧用css技巧实现三角符号

最新推荐文章于 2023-04-11 10:00:22 发布

猛一回头

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量1.3k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/xie_lu/article/details/73611569

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>巧用css技巧实现三角符号</title>
<style type="text/css">
    div{
        width:0;
        height:0;
        border:50px solid transparent;
        border-top-color:red;
    }
</style>
</head>
<body>
<div></div>
</body>
</html>

实现效果如下：
这里写图片描述
一个长宽都为0的框，它的四边其实是四个三角形。利用此特点，可以把其它三边的颜色都设为无色，以得到不同方向的三角形。关键代码如下：
div{
width:0px;
height:0px;
border:50px solid transparent;
border-top-color:red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
这里写图片描述
但当我们把这个框的长宽都不设为0以后，发现图像变成了如下图所示。这样我们也可以得到不同方向的梯形。关键代码如下：
div{
width:50px;
height:50px;
border:50px solid transparent;
border-top-color:red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
这里写图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

猛一回头

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
巧用css技巧实现三角符号

<html><head><title>巧用css技巧实现三角符号</title><style type="text/css"> div{ width:0; height:0; border:50px solid transparent; border-top-color:red; }</style></head
复制链接

扫一扫