CSS-特殊三角形

最新推荐文章于 2024-08-16 22:57:43 发布

王子老师

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量81

点赞数

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

本文链接：https://blog.csdn.net/qq_37304462/article/details/120520671

版权

CSS 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何利用CSS的边框技巧创建直角三角形和促销样式。通过设置元素的边框颜色、样式和宽度，可以巧妙地构造出各种几何形状。示例中展示了如何制作一个直角三角形以及一个带有倒三角促销标签的价格展示，其中文字环绕效果通过浮动和绝对定位实现。

摘要由CSDN通过智能技术生成

对我而言，你的出现，就是一道光。

利用盒子的宽度和高度为0 实现下面的图形
在这里插入图片描述

.ddd{
            height:0;
            width: 0;
            border-color:blue red green black;
            border-style: solid;
            border-width: 10px 10px 10px 10px;
        }

直角三角形：

.ddd{
            height:0;
            width: 0;
            border-color:transparent red transparent transparent;
            border-style: solid;
            border-width: 50px 20px 0 0;
        }

在这里插入图片描述

利用三角实现促销样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>王子CSS学习</title>
    <style>
        .ddd{
            margin: 100px auto;
            height:0;
            width: 0;
            border-color:transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }
        .aaa{
            width: 160px;
            height: 24px;
            border: 1px solid red;
            text-align: center;
            line-height: 24px;
        }
        .miaosha{
            position: relative;
            #浮动 实现文字环绕
            float: left;
            background-color: red;
            width: 90px;
            height: 100%;
            color: #ffffff;
            font-size: 700;
        }
        .miaosha i{
            right: 0;
            top: 0;
            #子绝父相，将三角定位到右边
            position: absolute;
            #宽高为0实现三角形
            width: 0;
            height: 0;
            border-color: transparent #fff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .origin{
            color: gray;
            font-size: 12px;
            #删除线
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div class="ddd"></div>
<div class="aaa">
    <span class="miaosha">￥1650 <i></i>
    </span>
    <span class="origin">￥20000</span>
</div>
</body>
</html>

在这里插入图片描述

王子老师

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-特殊三角形

对我而言，你的出现，就是一道光。利用盒子的宽度和高度为0 实现下面的图形.ddd{ height:0; width: 0; border-color:blue red green black; border-style: solid; border-width: 10px 10px 10px 10px; }直角三角形：.ddd{ he.
复制链接

扫一扫

专栏目录