html - 添加 2 :before's :after's on same div to create 2 triangles

Question

我有以下内容，我正在使用 css 创建一个三 Angular 形(看起来有边框)。

我想创建另一个三 Angular 形，完全相同，但在第一个三 Angular 形右侧约 50 像素。

你会怎么做这 2 个 :before's :after's ???

JSfiddle Here

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

您不需要使用单独的描边和填充创建三 Angular 形，使用 css3 变换旋转。然后，您可以对一个三 Angular 形使用 before，对第二个三 Angular 形使用 after。

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/