相关疑难解决方法(0)

CSS三角形如何工作？

在CSS Tricks上有很多不同的CSS形状- CSS的形状,我特别对三角形感到困惑:

CSS Triangle

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

Run Code Online (Sandbox Code Playgroud)

<div id="triangle-up"></div>

Run Code Online (Sandbox Code Playgroud)

它是如何以及为什么有效？

css geometry polygon css3 css-shapes

Sta*_*lin

2016 07-04

1791
推荐指数

16
解决办法

15万
查看次数

透明箭头/三角形缩进

我想在图像上做一个透明的箭头.此三角形应缩进半透明块并显示背景图像.

期望的输出:

透明的缩进CSS三角形

.barShow {
  background-color: #000;
  opacity: 0.5;
}

.barShow:before {
  top: 0%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top-color: #999;
  border-width: 20px;
  margin-left: -20px;
}

Run Code Online (Sandbox Code Playgroud)