Html 仅使用一个div倾斜一侧的div边界
我使用以下css创建了一个倾斜的divHtml 仅使用一个div倾斜一侧的div边界,html,css,frontend,css-transforms,Html,Css,Frontend,Css Transforms,我使用以下css创建了一个倾斜的div #outer-left{ -ms-transform: skew(-30deg,0deg); /* IE 9 */ -webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */ transform: skew(-30deg,0deg); background:#333333; width:200px; z-index:20; border-bottom:3px solid #2E8DEF;
#outer-left{
-ms-transform: skew(-30deg,0deg); /* IE 9 */
-webkit-transform:skew(-30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(-30deg,0deg);
background:#333333;
width:200px;
z-index:20;
border-bottom:3px solid #2E8DEF;
padding:10px 30px 10px 75px;
font-size:20px;
color:#2E8DEF;
position:relative;
left:-50px;
}
#outer-left:after{
content:"";
display:inline-block;
position:absolute;
width:20px;
height:100%;
background:#2E8DEF;
float:right;
right:0px;
top:0px;
z-index:10;
}
#inner-left{
-ms-transform: skew(30deg,0deg); /* IE 9 */
-webkit-transform: skew(30deg,0deg); /* Chrome, Safari, Opera */
transform: skew(30deg,0deg);
display:inline-block;
}
并使用两个div,即外部div来倾斜边框,使用div和内部div来取消文本的倾斜效果
但是我在div3中只使用了一个div就达到了同样的效果
看看小提琴:
如果我像在div3中那样使用更多的文本,它就会失真。
但对于使用2个div的具有更多文本的div2,情况并非如此
我完全知道这里发生了什么。我想知道,如果只使用一个div,即
Context
Hello
就可以实现DIV2,现在不使用两个div,即内部和外部div。我相信这就是您想要的:
CSS:
那把小提琴好像不管用。此外,这个问题似乎类似于@Harry,在这个连接中,额外的边界是三角形的,在我的问题中,额外的边界是平行四边形的。但是,尽管这给了我一个如何做的提示。是的,伙计,你只需要调整伪元素的位置(第二个使用
skew
)就可以了。你能告诉我们为什么你只想使用一个div吗?我的意思是,HTML可能看起来更好,但它可能需要一些粗糙的CSS。@WouterFlorijn正如你所说,HTML看起来会更好。这里的问题是,我必须在整个页面上使用这些元素至少30到40次。在css中,它只能定义一次。所以,我想要一个更干净的html,这样管理和修改就容易了。第二种方法是使用JS动态添加额外的html。但是,如果它只能由一个div完成,那就更好了。
#a {
position: relative;
width: 120px;
padding: 10px 20px;
font-size: 20px;
position: relative;
color: #2E8DEF;
background: #333333;
border-bottom: 3px solid #2E8DEF;
}
#a:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: #333333;
border-bottom: 3px solid #2E8DEF;
border-right: 20px solid #2E8DEF;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}