我需要一些帮助。
如何根据所附图片显示html代码。
我尝试修改CSS,但这不行
div {
margin:50px;
background-color: #c1c1c1;
border:#000 solid 1px;
position:relative;
}
div:after{
content:'';
width:24px;
height:24px;
background:#fff;
position:absolute;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
top:-12px;
left:50px;
border-right:#000 solid 2px;
border-bottom:#000 solid 2px;
}
<div></div>
谢谢
答案 0 :(得分:7)
一点transform:skew()
做到了。
除非您要定位的是非常老的浏览器,否则不再需要在这些规则中包括供应商特定的前缀。他们是broadly supported。 (Mozilla / Firefox和IE自2012年以来就不需要2d转换的前缀;自2015年以来就不需要Safari)。
div {
margin:50px;
background-color: #c1c1c1;
border:#000 solid 1px;
position:relative;
}
div:after{
content:'';
width:24px;
height:24px;
background:#fff;
position:absolute;
top:-12px;
left:50px;
border-bottom:#000 solid 2px;
border-left:#000 solid 2px;
transform:skew(0,-45deg)
}
<div></div>
答案 1 :(得分:3)
这是提高透明度的另一种方法:
div {
margin: 50px;
height: 2px;
background: linear-gradient(to right, #000 44px, transparent 44px, transparent 60px, #000 60px);
position: relative;
}
div:before,
div:after {
content: '';
width: 2px;
position: absolute;
top: 2px;
background: #000;
}
div:after {
height: 26px;
transform-origin: top right;
transform: rotate(45deg);
left: 60px;
}
div:before {
height: 19px;
top: 0px;
left: 42px;
}
body {
background: pink
}
<div></div>