Html 如何将两个三角形放在一起_Html_Css

Html 如何将两个三角形放在一起

html css

Html 如何将两个三角形放在一起,html,css,Html,Css,我用CSS创建了两个三角形，我想把它们放在一起，但我做不到这是我的代码： Triangle.html <!DOCTYPE HTML> <html> <head> <title>Triangle</title> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <body

我用

CSS

创建了两个三角形，我想把它们放在一起，但我做不到

这是我的代码：

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>

<!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>

这就是你说的把里面放在一起的意思吗

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

看看这个

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

我只添加了

位置：相对；顶部：-20px到<代码>。左。在

内，它对我有效

有关定位元素的详细信息@

请尝试此解决方案

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>

<!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>

查看演示

您想要这个吗

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

还是这个

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

嗯。。。你忘了保存你的小提琴。它将始终保持在同一位置。除非你确切地知道OP想要什么，否则这不是一个好的解决方案。现在看Fiddle，我保存了它，因为你也更改了HTML。我没有注意到。如果在

中放入任何东西，它会断开。在之前，在中放入任何东西。但是他没有提到他正在将某些东西放入其中，所以我没有给他那种解决方案！我知道他没有但你永远不知道。。。我一直认为OP不会给出完整的信息，但那只是我：P。但是，是的，我认为假设他不会在这种情况下是可以的，这只是一个形状。我不认为它会破裂。当然，其他元素将通过黑色/蓝色形状保持不变而可见。就像这是发生在真棒身上的事情！！你是一个很好的程序员：）