如何在CSS中创建一个带有弯角的页面 :after和 :before

这是在伪元素的帮助下实现的另一个原始效果。

在本文中,我们将学习如何创建一个带有弯角的页面,没有photoshop,以及伪元素 :after span>和 :before span>


带注释的代码。 此代码可以插入到 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>

在该实施例中,存在一个缺点 – 这是强制性的黑色一般背景,因为角落下方的阴影,左上角和一般背景以相同的颜色执行。

如果页面下的一般背景设置为鲜艳的颜色,阴影将不可见。

所以除了尺寸,粉碎你的头,如何消除这个缺点.

祝你创造性的成功。

Рекомендую: Готовые HTML шаблоны на русском

此条目发表在Без рубрики分类目录。将固定链接加入收藏夹。
А так же:

发表评论

电子邮件地址不会被公开。 必填项已用*标注