重写一个伪元素horiz。垂直答案

【问题标题】：rewriting a pseudo element horiz. to vertical重写一个伪元素horiz。垂直
【发布时间】：2015-05-13 01:20:33
【问题描述】：

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

我需要把它写成“箭头/指针”指向左边

当前代码 -

HTML

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

mask css 在小提琴中

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

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

代码创建了两个黑色的形状，它们充当 div 底部的“遮罩”

【问题讨论】：

标签： javascript jquery html css pseudo-element

【解决方案1】：

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

使用

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

将创建所需的三角形效果，您可以在页面上玩耍并使其恰到好处

【讨论】：

如何将它应用到我的代码中？我需要隐藏“三角形”，而不是创建
用图片编辑了我的问题

【解决方案2】：

body {
  margin-right: 50px;
  margin-left: 50px;
}
.arrow_box {
  position: relative;
  background: #FF0000;
  border: 4px solid #FF0000;
  height:150px;
}
.arrow_box:after,
.arrow_box:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.arrow_box:after {
  border-color: rgba(255, 0, 0, 0);
  border-right-color: #FF0000;
  border-width: 30px;
  margin-top: -30px;
}
.arrow_box:before {
  border-color: rgba(255, 0, 0, 0);
  border-right-color: #FF0000;
  border-width: 36px;
  margin-top: -36px;
}

<div class="preview">
  <div class="arrow_box">

  </div>
</div>

使用CSS ARROW PLEASE!制作

【讨论】：

我想也许我问错了问题。我不想创建箭头/三角形。它需要被屏蔽掉。箭头在 div 内部。我的代码在箭头之外创建了条，而不是箭头本身。此代码创建一个箭头并将其放在 div 之外

【解决方案3】：

尝试添加.indx-img

transform:rotate(90deg);

.mask

left: 10%;

.indx-img {
  position: relative;
  padding: 16% 0;
  background-color: red;
  transform: rotate(90deg);
}
.mask:before {
  border-left: 0 none;
  border-right: 20px solid transparent;
  left: 0;
}
.mask:after {
  border-left: 20px solid transparent;
  border-right: 0 none;
  right: 0;
}
.mask:before,
.mask:after {
  border-bottom: 20px solid #fff;
  content: " ";
  display: block;
  height: 0;
  position: absolute;
  top: 0;
  width: 50%;
  box-sizing: border-box;
}
.mask {
  bottom: 0px;
  height: 20px;
  left: 10%;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

<div class="indx-img">
  <div class="mask"></div>
</div>

jsfiddle https://jsfiddle.net/gu1sgotd/4/

【讨论】：

我认为您误读了我要查找的内容，我需要 div 一侧的箭头指向左侧。我相信我的代码添加了一个带有箭头的栏，并放置在底部。我需要将它旋转到一边。我不需要创建三角形
用图片编辑了我的问题