CSS一個盒子如何變成三角形？

yi把菜刀發表於2020-12-20
CSS

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都可以設定不同的屬性值來達到不同的效果

相關文章