Question

我用CSS创建了2个三角形，我想把它放在一起，但我不能这样做。

这是我的代码：

Triangle.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>

的style.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;
}

Answer 1

这是什么意思放在一起？

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; }

Answer 2

查看此demonstration。

<强> 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;
    position: relative;
    top: -20px;
}

我只将position:relative; top: -20px;添加到.left .inside，这对我有用！

详细了解定位元素@ w3schools - CSS Positioning

Answer 3

试试这个解决方案

<强> Triangle.html

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

<强>的style.css

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

参见演示 http://jsfiddle.net/4fvwA/

Answer 4

你想要这个

.left .inside{
    margin-top:-18px;
    margin-left:2px;}

或者

.left .inside{
        margin-top:-18px;
        margin-left:22px;}

如何将2个三角形放在一起css

4 个答案:

DEMO