CSS一个盒子如何变成三角形？

最新推荐文章于 2022-11-30 14:53:27 发布

yi把菜刀

最新推荐文章于 2022-11-30 14:53:27 发布

阅读量2.1k

点赞数 2

分类专栏： CSS 前端学习

本文链接：https://blog.csdn.net/VAEaaaa/article/details/111413297

版权

前端学习同时被 2 个专栏收录

22 篇文章 2 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

CSS苦逼学习日记（11）

你想成功做出以下的图形吗？
在这里插入图片描述

上图在左右两边有一个斜着的竖线分割开了两部分内容，其实是在盒子内部多放了一个盒子实现的效果，因为这个盒子就是三角形的形状。

那么是如何制作的呢？

图一代码如下：

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

最重要的一点是此盒子的 width 和 height 只能初始化为0，

如果要做成三角形，则只需要给某一边的边线设置颜色，其余全部用 transparent （透明的意思）来表示。然后给边添加宽度就可达到相应的效果。

而图二的是做了一个透明的三角形把它覆盖在了原本是矩形的盒子之上，所以显现出来是一个三角形的形状：

源代码：
可根据代码各种修改尝试来体验

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 0;
            height: 0;
            border-color: transparent red transparent transparent;
            border-style: solid;
            border-width: 100px 50px 0 0;
        }
        .price {
            width: 160px;
            height: 24px;
            line-height: 24px;
            border:1px solid red;
            margin: 200px auto;
        }
        .left {
            position: relative;
            text-align: center;
            float: left;
            width: 90px;
            height: 100%;
            background-color: red;
            color: #ffffff;
            font-weight: 700;
            margin-right: 8px;
        }
        .left i {
            position: absolute;
            right: 0;
            top: 0;
            width: 0;
            height: 0;
            border-color: transparent #ffffff transparent transparent;
            border-style: solid;
            border-width: 24px 10px 0 0;
        }
        .right {
            font-size: 12px;
            color: gray;
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="price">
        <span class="left">$1900
            <i></i>
        </span>
        <span class="right">$1800</span>
    </div>
</body>
</html>

当然，这是用来做三角形，如果要做其他的形状，border-color和 border-width都可以设置不同的属性值来达到不同的效果

yi把菜刀

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
CSS一个盒子如何变成三角形？

CSS苦逼学习日记（11）你想成功做出以下的图形吗？上图在左右两边有一个斜着的竖线分割开了两部分内容，其实是在盒子内部多放了一个盒子实现的效果，因为这个盒子就是三角形的形状。那么是如何制作的呢？图一代码如下： .box1 { width: 0; height: 0; border-color: transparent red transparent transparent; border-s
复制链接

扫一扫

专栏目录