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

通过关于stackoverflow的帮助，我已经能够generate and position a CSS triangle in the correct position on my website，我还学习了如何color a triangle in 2 equal halves。

但是我坚持将两个示例合并在一起，由于我弄得一团糟，我尝试过的我认为不值得粘贴的内容。

我正在尝试获得一个具有比例的三角形，它像this fiddle example一样位于div的底部，然后像this fiddle example一样分成2种颜色。

我认为我做错了什么，是在不同的小提琴中有以下不同用法：

:before

最佳答案

嗯...，这是我尝试达到的效果（比例+分为2种颜色）：

JSFiddle Demo。

在此演示中，我将triangle添加到.bottom div中，并将其放置在顶部（负值）。

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

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

关于css - 将CSS彩色三 Angular 形定位并调整大小至所需位置和比例，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21407790/