相关疑难解决方法(0)

透明箭头/三角形缩进

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

期望的输出:

透明的缩进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)

<div class="barShow"></div>

Run Code Online (Sandbox Code Playgroud)

该透明CSS箭应该是没有颜色的透明.

css svg css3 css-shapes

use*_*727

2018 03-09

46
推荐指数

2
解决办法

4万
查看次数

背景图像,线性渐变锯齿状边缘结果需要平滑边缘

我试图让图像的底部指向.我试图通过在底部生成两个三角形来获得此效果.他们必须有回应.并且在搜索了整个互联网之后,有很多例子对我的要求不起作用,这是迄今为止我设法制作的最好的例子.

body,
html {
  height: 100%
}
.image {
  width: 1410px;
  margin-right: auto;
  margin-left: auto;
  height: 500px;
  overflow: hidden;
  position: relative;
}
.pointer {
  height: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.triangleWrapper {
  width: 50%;
  height: 50px;
  float: left;
}
.lefttriangle {
  width: 100%;
  height: 10px;
  left: 0px;
  top: 0px;
  background-image: linear-gradient(to right top, #ffffff 50%, transparent 50%);
}
.righttriangle {
  width: 100%;
  height: 10px;
  right: 0px;
  top: 0px;
  background: linear-gradient(to left top, #ffffff 50%, transparent …

Run Code Online (Sandbox Code Playgroud)

css linear-gradients css3 responsive-design css-shapes

Ric*_*ard

2015 10-13

11
推荐指数

2
解决办法

6350
查看次数