这是在伪元素的帮助下实现的另一个原始效果。
在本文中，我们将学习如何创建一个带有弯角的页面，没有photoshop，以及伪元素 :after和 :before
带注释的代码。 此代码可以插入到 Notepad ++中，在浏览器中打开图像，并修改角落的尺寸，颜色和位置。
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>文件</title>
<style>
/*一般背景*/
body {
background: #4A8A91;
}
/*页*/
.blok {
background: #fff;
width: 250px;
height: 315px;
margin: 100px 0 0 200px;
}
/*标题在页面上*/
h1 {
padding: 75px 0 0 40px;
font-family: Arial;
}
/*页面上的文字*/
p {
padding: 0 0 20px 20px;
font-family: Arial;
font-size: 18px;
color: #4b4b4b;
}
/*挡住角落*/
.reg {
position: relative;
box-shadow: 5px 5px 5px #4A8A91;
}
/*左上角与页面背景合并 */
.reg:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
border-top: 63px solid #4A8A91;
border-right: 63px solid transparent;
}
/*可见右下角*/
.reg:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0px;
height: 0px;
border-bottom: 65px solid #F7F7F7;
border-left: 65px solid transparent;
box-shadow: 1px 7px 7px #4A8A91;
}
</style>
</head>
<body>
<div class="blok">
<div class="reg">
<h1>Заголовок</h1>
<p>Здравствуйте уважаемые веб-мастера</p>
<p>Давайте сделаем страницу с загнутым уголком с помощью псевдоэлементов CSS</p>
</div>
</div>
</body>
</html>
在该实施例中，存在一个缺点 — 这是强制性的黑色一般背景，因为角落下方的阴影，左上角和一般背景以相同的颜色执行。
如果页面下的一般背景设置为鲜艳的颜色，阴影将不可见。
所以除了尺寸，粉碎你的头，如何消除这个缺点.
祝你创造性的成功。
