html - 如何将2个三 Angular 形放在一起css-6ren

html - 如何将2个三 Angular 形放在一起css

转载作者：行者123 更新时间：2023-11-28 12:47:37

我用 CSS 创建了 2 个三 Angular 形，我想把它们放在一起，但我做不到。

这是我的代码:

三 Angular .html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Triangle</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div class="left"><div class="inside"></div></div>
    </body>
</html>

样式.css

.left
{
    width: 0px;
    height: 0px;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid yellow;
}

.left .inside
{
    width: 0px;
    height: 0px;
    border-bottom: 18px solid transparent;
    border-top: 18px solid transparent;
    border-right: 18px solid black;
}

最佳答案

这就是放在一起的意思吗？

DEMO

CSS

.left {
    position: relative;
    width: 0px;
    height: 0px;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid yellow;
}

.left .inside {
    position: absolute;
    top: -18px; left: 2px;
    width: 0px; height: 0px;
    border-bottom: 18px solid transparent;
    border-top: 18px solid transparent;
    border-right: 18px solid black;
}