0
小提琴:https://jsfiddle.net/pj489c50/如何有一个div的切口在与阴影底部从右向左
HTML:
<div class="folded-corner-topright">
<p>JUST ANOTHER TEXT</p>
</div>
如何修改我的CSS,所以
- 盒子的影子一路走到最顶端
- 将箭头移到底部并在蓝色箭头的左边添加一个灰色箭头。
小提琴:https://jsfiddle.net/pj489c50/如何有一个div的切口在与阴影底部从右向左
HTML:
<div class="folded-corner-topright">
<p>JUST ANOTHER TEXT</p>
</div>
如何修改我的CSS,所以
这应该让你关闭。作为提示,我会分开您的:before
和:after
选择器属性,以便更清楚地将哪些规则应用于每个属性。
html{
height:100%;
}
body{
height:100%;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:20px;
background: #FFF;
}
[class^="folded-corner-"]{
color: #444;
position:relative;
width:350px;
background:#E4E4E4;
margin-bottom:10px;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);
}
[class^="folded-corner-"],
[class^="folded-corner-"]:before{
min-height:100px;
right: 20px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
[class^="folded-corner-"]:before,
[class^="folded-corner-"]:after{
position:absolute;
content:"";
display:block;
position:absolute;
bottom:0;
margin-right: 20px;
width:0px;
height:0px;
box-sizing: border-box;
border-style:solid;
}
[class^="folded-corner-"] p{
padding:20px;
color:#444;
font-size:12px;
}
.folded-corner-topright:before{
border-width:0px 0px 20px 20px;
border-color:transparent transparent #d7d7d7 transparent;
right: 0px;
}
.folded-corner-topright:after{
right:-20px;
border-width:20px 20px 0px 0px;
border-color:#0099E7 #fff transparent transparent;
box-shadow:3px 3px 2px 2px #FFF;
}
<div class="folded-corner-topright">
<p>JUST ANOTHER TEXT</p>
</div>
请确保您始终在您的问题足够的代码来重现你的问题,而不是托管大部分在场外的演示。问题应该是独立的,外部资源应该只用于支持(而不是取代)其内容。谢谢 – Serlite