Question

我正在尝试创建一个半透明的响应三角形，只有它的边框的一边用div染色

我在网上发现了一种使用2个三角形并将它们放在另一个上面的方法，但问题是我希望三角形是半透明的，因此可以看到div的背景图像

像这样：http://i.imgur.com/ZxHc3jV.jpg

非常感谢您的帮助，我们非常感谢您的帮助！

.container {
	width: 33.33%;
	height: 500px;
	background: blue;
	overflow: hidden;
	position: relative;
}
	
.triangle {
	width: 100%;
	height: 0;
	padding-top:100%;
	overflow: hidden;
	position: absolute;
	bottom: 0;
	right: 0;
}
.triangle:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin-top:-500px;
	border-top: 500px solid transparent;
	border-right: 500px solid #4679BD;
}

<body>
  	<div class="container">
	     <div class="triangle"></div>
    </div>

</body>

Answer 1

你想要下面的东西： -

.triangle{
  width:0px;
  height:0px;
  border-bottom:87px solid red;
  border-left:87px solid white;

}

<body>
  <div class="triangle"></div>
  </body>

在div中创建半透明的响应三角形

1 个答案: