div折角~~~

Posted luwanying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div折角~~~相关的知识,希望对你有一定的参考价值。

技术分享图片

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>折角效果</title>
<style type="text/css">

    div {
        width: 300px;
        height: 200px;
        background: #333;
        position: relative;
    }

    div:before {
        content: ‘‘;
        width: 0px;
        height: 0px;
        position: absolute;
        top: 0px;
        right: 0px;
        border-right: 0px solid #333;
        border-bottom: 0px solid #768;
        border-bottom-width: 30px;
        border-right-width: 30px;
    }
    
</style>
</head>
<body>

<div></div>

</body>
</html>

 

以上是关于div折角~~~的主要内容,如果未能解决你的问题,请参考以下文章

css 折角效果

css 折角效果 - 有角度

css 折角

CSS CSS折角效果

CSS 折角效果

边框折角效果