css3 绘制三角形

最新推荐文章于 2021-09-16 22:20:17 发布

yb305小白

最新推荐文章于 2021-09-16 22:20:17 发布

阅读量139

点赞数

分类专栏： css 文章标签： Css3绘制三角形

本文链接：https://blog.csdn.net/yb305/article/details/115706794

版权

css 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

不带边框三角形：

<html>
<head>
<style>
.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent red;/*透明 透明  红色*/
    margin:40px auto;
    position:relative;
}
</style>
</head>
<body>
    <div class="triangle_border_up">
</div>
</body>
</html>

效果：

带边框三角形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<style>

.triangle_border_up{
    width:0;
    height:0;
    border-width:0 30px 30px;
    border-style:solid;
    border-color:transparent transparent #333;/*透明 透明  灰*/
    margin:40px auto;
    position:relative;
}
.triangle_border_up span{
    display:block;
    width:0;
    height:0;
    border-width:0 28px 28px;
    border-style:solid;
    border-color:transparent transparent red;/*透明 透明  red*/
    position:absolute;
    top:1px;
    left:-28px;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="triangle_border_up">
    <span></span>
</div>
</div>
</div>
</body>
</html>

效果

yb305小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 绘制三角形

不带边框三角形：<html><head><style>.triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent red;/*透明透明红色*/ margin:40px auto; position:relative;
复制链接

扫一扫

专栏目录