切角css

时间:2015-08-12 18:42:35

标签: html css

我正在尝试在CSS中使用剪切角。
使用以下代码:

.cutCorner:after {
    position: absolute;
    left: -2px;
    top: 1491px;
    content: '';
    border-bottom: 50px solid #302D45;
    border-left: 1455px solid transparent;
}

现在我想要的背景是:

background: radial-gradient(50% 70%, #62729B 51%, #4C3A6E 100%), linear-gradient(-180deg, rgba(124,83,169,0.50) 0%, rgba(0,0,0,0.63) 100%), rgba(68,65,90,0.50);

如何做到这一点?理想情况下,它应该匹配它下面的div,例如查看网站:http://matthijsotterloo.com/panda_courses/(向下滚动到部分说:“学习最新的网络技术。”

提前致谢!

2 个答案:

答案 0 :(得分:1)

只需在css中使用border-radius标记即可。 例如: -

border-radius:25px;

答案 1 :(得分:0)

要获得最佳的跨浏览器支持,您可以使用以下代码:

/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px; 

/* Firefox 1-3.6 */
-moz-border-radius: 12px; 

/* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
border-radius: 12px;