# 常用的 CSS 主流布局案例（49~56）
涵盖功能和技术点
- 常见的网页布局以及功能模块
- 涉及 HTML/HTML5、CSS/CSS3 主流布局相关知识点（常规布局和 Flex 布局等）
- 专项 CSS 主流布局案例（针对性训练）
# 49、CSS 绘制三角形
应用场景和技术要点
重点：元素宽度为 0，其中一个边框添加颜色，另外三外边框颜色透明，就形成了一个三角形
See the Pen 49、CSS绘制三角形 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.triangle {
width: 0;
border: 50px solid transparent; /*边框颜色透明*/
border-top: 50px solid red; /*上边框颜色为红色，形成向下的倒三角形*/
}
</style>
<body>
<div class="triangle"></div>
</body>
# 50、 CSS 绘制爱心
应用场景和技术要点
思路：绘制两个长方形，将上半部分设为半圆，然后分别以左下角和右下角为基点旋转负 45deg 和正 45deg
See the Pen 50、CSS绘制爱心 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
width: 50px;
height: 80px;
position: absolute;
content: "";
left: 50px;
top: 0;
background-color: red;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%; /*旋转基点 左下*/
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%; /*旋转基点 右下*/
}
</style>
<body>
<div class="heart"></div>
</body>
# 51、 视频充当背景
应用场景和技术要点
重点：视频相对父容器水平和垂直居中，并且以原有比例来裁剪 boject-fit:cover;
See the Pen 51、 视频充当背景 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.container {
position: relative;
height: 300px;
background-color: red;
}
/*放视频容器*/
.container-wrapper {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
/*视频大小和位置 水平垂直居中*/
.container-video {
object-fit: cover; /*视频裁剪*/
height: 100%;
width: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/*视频上文字容器*/
.container-content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
align-items: center;
display: flex;
flex-direction: column; /*从上往下排列*/
justify-content: center; /*水平居中*/
color: #fff;
font-size: 32px;
}
</style>
<body>
<div class="container">
<!-- 放视频的容器 -->
<div class="container-wrapper">
<video
class="container-video"
autoplay
src="video/weibo_login.mp4"
></video>
</div>
<div class="container-content">视频上可以放任何内容</div>
</div>
</body>
# 52、 投票按扭
应用场景和技术要点
思路：要实现这种一行三列的布局，中间高度自适应缩放，可以利用 flex 布局，添加 flex-direction: column;内容默认从上往下排列，然后给中间盒子加上 flex:1;中间盒子高度自适应缩放
See the Pen 52、 投票按扭 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.voting {
border: 1px solid #555;
border-radius: 5px;
display: inline-flex;
flex-direction: column; /*内容默认从上往下排列*/
height: 100px;
padding: 5px;
}
/*上下三角形共同样式*/
.voting-button-up::after,
.voting-button-down::after {
display: block;
content: "";
height: 0;
width: 0;
border: 10px solid transparent;
cursor: pointer;
}
/*上三角形*/
.voting-button-up::after {
border-bottom-color: #555;
border-top: 0px;
}
/*下三角形*/
.voting-button-down::after {
border-top-color: #555;
border-bottom: 0px;
}
.voting-number {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<div class="voting">
<div class="voting-button-up"></div>
<div class="voting-number">99</div>
<div class="voting-button-down"></div>
</div>
</body>
# 53、水印效果
应用场景和技术要点
思路：水印的文字要设置禁止用户选中，加 user-select: none;属性。同时水印要在文字的下面显示，可以添加 z-index:-1 来实现
See the Pen 53、水印效果 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
position: relative;
height: 100%;
}
.container-wrapper {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: -1; /*水印在正文内容下面*/
}
.container-watermark {
color: rgba(0, 0, 0, 0.1);
font-size: 50px;
font-weight: bold;
text-transform: uppercase;
transform: rotate(-45deg);
user-select: none; /* 禁止用户选取文本*/
}
</style>
<body>
<div class="container">
<!--水印容器 -->
<div class="container-wrapper">
<div class="container-watermark">水印文字</div>
</div>
<!-- 正文内容 -->
.............
</div>
</body>
# 54、锯齿形时间线
应用场景和技术要点
思路：利用:nth-child(2n+1)来选择奇数项，并给奇数项盒子添加右下边框线。利用:nth-child(2n)来选择偶数项，并给偶数项盒子添加左下边框线。 然后利用::after 伪元素绘制圆点，结合定位，分别定位在左右边框线水平和垂直中间的位置。
See the Pen 54、锯齿形时间线 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.timeline-item {
position: relative;
border-bottom: 1px solid #71717a;
width: 50%;
margin: 0px auto;
min-height: 100px;
padding: 0px 20px;
}
/*绘制圆点样式*/
.timeline-item::after {
content: "";
position: absolute;
top: 50%;
height: 2rem;
width: 2rem;
border-radius: 50%;
background: #71717a;
background-color: red;
}
/*偶数项，画左边线*/
.timeline-item:nth-child(2n) {
border-left: 1px solid #71717a;
}
/*偶数项，圆点位置 靠左垂直居中*/
.timeline-item:nth-child(2n)::after {
left: 0;
transform: translate(-50%, -50%);
}
/*奇数项，画右边线*/
.timeline-item:nth-child(2n + 1) {
border-right: 1px solid #71717a;
}
/*奇数项，圆点位置 靠右垂直居中*/
.timeline-item:nth-child(2n + 1)::after {
right: 0;
transform: translate(50%, -50%);
}
</style>
<body>
<div class="timeline-item">......</div>
<div class="timeline-item">......</div>
</body>
# 55、 徽章缎带
应用场景和技术要点
思路：绘制一个圆和两个三角形，然后两个三角形运用定位和旋转形成如下效果
See the Pen 55、 徽章缎带 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
.badge-ribbon {
position: relative;
background: red;
height: 100px;
width: 100px;
border-radius: 50%;
margin-left: 10px;
}
/*绘制两三角形*/
.badge-ribbon::before,
.badge-ribbon::after {
content: "";
position: absolute;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 70px solid red;
top: 70px;
}
/*控制三角形位置和旋角度*/
.badge-ribbon::before {
left: -10px;
transform: rotate(-140deg);
}
.badge-ribbon::after {
right: -10px;
transform: rotate(140deg);
}
</style>
<body>
<div class="badge-ribbon"></div>
</body>
# 56、弧形尾箭头
应用场景和技术要点
思路：绘制一个三角形和一个弧线，两者用定位和旋转结合到一起就可以
See the Pen 56、CSS 绘制弧形尾箭头 by arry (@arryblog) on CodePen.
点击查看完整源代码
<style>
/*绘制三角形*/
.curvedarrow {
position: relative;
width: 0;
border-top: 90px solid transparent;
border-right: 90px solid red;
transform: rotate(10deg) translateX(100%);
}
/*绘制向下的弧线*/
.curvedarrow:after {
width: 120px;
height: 120px;
content: "";
position: absolute;
border: 0px solid transparent;
border-top: 30px solid red;
border-radius: 200px 0 0 0;
top: -110px;
left: -90px;
transform: rotate(45deg);
}
</style>
<body>
<div class="curvedarrow"></div>
</body>
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X