CSS画三角

最新推荐文章于 2024-06-19 14:48:22 发布

以南_ttrg

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量114

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41965731/article/details/108670123

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、等边直角三角形

三角案例

在网页中我我们会遇到这种三角，我们可以通过css来实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/iconfont.css">
<script src="js/iconfont.js" ></script>
<style>
    .one{
        width: 0px;
        height: 0px;
        /*考虑兼容性*/
        line-height:0 ;
        font-size: 0;
        border:50px solid;
        border-bottom-color: red;
        border-left-color: yellow;
        border-top-color: blue;
        border-right-color: green;
    }
</style>
<body>
    <div class="one"></div>
</body>
</html>

页面上显示的结果。

所以我们可以通过隐藏其他角来制作三角形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<link rel="stylesheet" href="css/iconfont.css">
<script src="js/iconfont.js" ></script>
<style>
    .one{
        width: 0px;
        height: 0px;
        /*考虑兼容性*/
        line-height:0 ;
        font-size: 0;
        border:50px solid transparent;
        border-top-color: red;
    }
</style>
<body>
    <div class="one"></div>
</body>
</html>

二、直角三角形

类似于我们做出一个京东秒杀价格的一个示例。

在做这个示例之前我还提前去京东官网（火狐浏览器，其他的都正常）去重新看了一下，发现。。。

不知道是有意为之，还是真的出了错

原理：

核心代码：

示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    .price{
        width: 220px;
        height: 30px;
        border: 1px solid red;
        line-height: 30px;
    }
    .pri_miaosha{
        position: relative;
        float: left;
        width: 120px;
        height: 30px;
        font-size: 20px;
        color: white;
        text-align: center;
        background-color: red;
        font-weight: 700;
    }
    .pri_org{
        margin-left: 20px;;
        color:darkgray;
        font-size: 16px;
        text-decoration: line-through;
    }
    .price .pri_miaosha i{
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        line-height: 0;
        font-size: 0;
        border-color:  transparent white transparent transparent;
        border-style: solid;
        border-width: 30px 10px 0 0;
        right: 0px;
    }
</style>
<body>
<div class="price">
    <div class="pri_miaosha">￥1960.00
        <i></i>
    </div>
    <div class="pri_org">￥3560.00</div>
</div>
</body>
</html>