div折角~~~

Posted 2021-01-03 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折角~~~的主要内容，如果未能解决你的问题，请参考以下文章