Question

我有以下内容，我正在用css创建一个三角形（看起来像是有边框）。

我想创建另一个三角形，完全相同，但是在第一个三角形的右边大约50px。

你怎么做这些2：之前的：之后的???

HTML

<div class="section-modules">
    <div class="my-account">
        <div class="section-module-light">
            <h3>Register Here</h3>
            <p>It’s quick and easy and you’ll be the first to know about new bits we release.</p><a href="#" class="btn btn-blank">Register Now</a>
        </div>
    </div>
</div>

CSS

.section-module-light:after, 
.section-module-light:before {
    content: '';
    position: absolute;
}
/* Styling block element */
.my-account .section-module-light {
    position: relative;
    margin-bottom: 2em;
    padding: 1em;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-color: transparent;
    color: #444;
}
/* Stroke */
.my-account .section-module-light:before {
    bottom: -0px;
    left: 150px;
    border-width: 36px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid #ccc;
}
/* Fill */
.my-account .section-module-light:after {
    bottom: -1px;
    left: 150px;
    border-width: 34px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid white;
}

JSfiddle Here

Answer 1

您不需要创建具有单独笔触和填充的三角形，请使用css3变换旋转。然后你可以在之前使用一个三角形，然后在第二个之后使用。

display: block;
width: 34px;
height: 34px;

transform: rotate(45deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
background: white;

在此处查看完整代码：http://jsfiddle.net/07jfLdwL/

Answer 2

您可以使用CSS3变换旋转属性。见文件。

添加2：之前：在同一个div之后创建2个三角形

2 个答案: