0

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

这是我的代码：

三角.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;
}
4

4 回答 4

0

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

演示

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;
}
于 2013-06-23T12:27:47.377 回答
0

看看这个演示。

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 定位

于 2013-06-23T12:32:46.473 回答
0

试试这个解决方案

三角.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: 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/

于 2013-06-23T12:35:03.110 回答
0

你要这个

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

或这个

.left .inside{
        margin-top:-18px;
        margin-left:22px;}
于 2013-06-23T12:42:36.237 回答