# 常用的 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>
上次更新时间: 8/22/2022, 6:46:52 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X