css - 将 CSS 分色三 Angular 形定位并调整大小到所需的位置和比例

Question

通过 stackoverflow 的帮助，我能够 generate and position a CSS triangle in the correct position on my website ，我还学会了如何 color a triangle in 2 equal halves .

但我一直坚持将这两个示例合并在一起，我认为我尝试过的内容不值得粘贴在这里，因为我把它弄得一团糟。

我正在尝试获得一个三 Angular 形，该三 Angular 形具有一定的比例并位于 div 的底部，如 this fiddle example然后分为 2 种颜色，如 this fiddle example .

我认为我出错的地方是在不同的 fiddle 中有不同的用法:

:before

Answer 1

嗯...，这是我实现此效果的尝试(比例 + 分成 2 种颜色):

JSFiddle Demo .

在此演示中，我将 triangle 添加到 .bottom div 并将其定位在顶部(负值)。

然后添加 margin-top: 1%; 属性在调整窗口大小时移动三 Angular 形:

HTML

<div class="top"></div>
<div class="bottom">
    <div class="triangle"></div>
</div>

CSS:

.top {
    /* other styles... */
    position: relative;
    z-index: 2;
}

.bottom {
    background: lightGreen;
    height: 100px;
    position: relative;
    z-index: 1;       /* A lower z-index value than .top  */
                      /* Or use overflow: hidden; instead */
}

.triangle {
    width: 40px;
    height: 20px;
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    margin: auto;
    margin-top: 1%;  /* Move the triangle when resizing the window */
    z-index: 1;
}

.triangle:before {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent blue transparent transparent;
}

.triangle:after {
    content: " ";
    position: absolute;
    left: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: red transparent transparent transparent;
}