Question

我尝试创建底部三角形＆＃34; border＆＃34;由于我不想使用图像，因此使用线性渐变。嗯，时髦的事情发生了。它似乎只适用于Firefox，任何其他浏览器都有问题。发生了什么？我需要帮助。添加的部分是彩色的，以便更好地查看。如果有更好的方法具有相同的效果，请告诉我。谢谢。 Picture

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        body {
            background: #403434;
        }
        #box {
            width: 55%;
            margin: 50px auto;
            background: #eee;
            height: 300px;
            position: relative;
        }
        #box:before {
            content: "";
            position: absolute;
            bottom: -15px; 
            width: 100%; height: 15px;
            background-image: linear-gradient(45deg, transparent 50%, #c37e2e 0),
                linear-gradient(135deg, #c37e2e 50%, transparent 0);    
            background-size: 15px 15px;
        }
    </style>
</head>
<body>
    <div id="box">  
    </div>
</body> 
</html>

CSS线性渐变时髦的外观

0 个答案: