javascript - 重写伪元素水平。垂直

Question

我有代码在 div 的底部创建一个元素作为向下的“箭头/指针”。

我需要这样写，以便“箭头/指针”指向左侧

当前代码 -

HTML

<div style="background-image:url('...');">
    <div class="mask"></div>
</div>

掩码 css 在 fiddle 中

https://jsfiddle.net/hunt0194/gu1sgotd/

我试过将“底部”值更改为“左侧”值等。但无法正常工作

代码创建了两个黑色形状，作为 div 底部的“ mask ”

Answer 1

到这里css-triangle-generator , 生成你自己的三 Angular 形 css。它比您当前使用的代码容易得多。

使用

border-width: 100px 100px 100px 0;
border-color: transparent red transparent transparent;

将创建所需的三 Angular 形效果，您可以随意调整页面并使其恰到好处