Question

是否可以在右侧图片上设置样式（倾斜）三角形？ http://s15.postimg.org/h2vruavmz/triangle.jpg

我想扭曲它，使背景透明度为0.5并隐藏三角形的底部边框。

＆＃13;

body {
    background-color: #ccc;
}
.arrow_box {
	position: absolute;
    top: 40px;
    left: 40px;
	background: #fff;
	/*border: 1px solid #ffffff;*/
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #fff;
	border-width: 20px;
	margin-left: -20px;
}
.arrow_box:before {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #000;
	border-width: 21px;
	margin-left: -21px;
}

＆＃13;

<div class="arrow_box"></div>

＆＃13;

Answer 1

您可以在transform: skew(60deg,0deg);和:before

上使用:after

body {
    background-color: #ccc;
}
.arrow_box {
	position: absolute;
    top: 40px;
    left: 40px;
	background: #fff;
	/*border: 1px solid #ffffff;*/
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
    transform: skew(60deg,0deg);
}

.arrow_box:after {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #fff;
	border-width: 20px;
	margin-left: -12px;
}
.arrow_box:before {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #000;
	border-width: 24px;
	margin-left: -21px;
}

<div class="arrow_box"></div>

Fiddle

我认为您不能使用您用于绘制三角形的技术轻松地使背景透明。如果可以，您应该使用 png 图像。

Answer 2

您当前使用的方法意味着您将无法在三角形上设置半透明“背景”。这是因为三角形的黑色边框实际上是一个略大的单独三角形，只是较小的白色三角形覆盖其中心。如果您修改白色三角形的不透明度，那么您将只看到黑色三角形。

使用另一种方法创建三角形可以避免这种情况。一般原则是创建一个框，然后使用transform: rotate(45deg);将其转向侧面。在容器上使用overflow: hidden;，您可以切掉一半的盒子，为您留下一个没有底边框的三角形。

然后，您可以使用transform: skewX(55deg);将容器倾斜到一侧。

body {
  background-color: #ccc;
}
.arrow_box {
  height: 17px;
  left: 40px;
  overflow: hidden;
  position: absolute;
  top: 40px;
  transform: skewX(55deg);
  width: 34px;
}
.arrow_box:after {
  background-color: rgba(255, 255, 255, 0.5); 
  border: 2px solid rgba(0, 0, 0, 1);
  content: " ";
  height: 20px;
  left: 5px;
  position: absolute;
  top: 5px;
  transform: rotate(45deg);
  width: 20px;
}

<div class="arrow_box"></div>

带边框的css透明三角形

2 个答案: