小编bib*_*ont的帖子

如何创建具有对角线(或有角度)顶线的div

我是CSS3的新手,我所知道的只是自学,阅读你们或任何其他教程,所以经过数小时的研究和试错,我真的可以使用你的帮助:(.

我试图旋转一个div的顶线.这是我到目前为止所做的:

http://blanc-design.com/sigma2/

在页脚上,我旋转了两个div来创建该效果.但我想做的是在绿色div上有一个直线底线.这是我希望它的一个例子:

http://blanc-design.com/sigma2/ex.jpg

我不知道我是否正确解释自己.这是我用来旋转div的CSS代码:

 #footer-top {
color: #fff;
padding: 35px 0 15px;
transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);
}

#footer-space {
padding: 0 0 6px;
}

#footer-top2 {
color: #fff;
background-color: rgba(20,  122,  188,  0.5);
background: rgba(20,  122,  188,  0.5);
color: rgba(20,  122,  188,  0.5);
padding: 6px 0 12px;
height: 2px;
transform:  rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform:  rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) …
Run Code Online (Sandbox Code Playgroud)

html css angle diagonal

7
推荐指数
1
解决办法
3万
查看次数

标签 统计

angle ×1

css ×1

diagonal ×1

html ×1