CSS制作小旗子与小箭头

时间:2020-04-11
本文章向大家介绍CSS制作小旗子与小箭头,主要包括CSS制作小旗子与小箭头使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

CSS制作小旗子与小箭头

效果图如下:

小旗子效果图

小箭头效果图

小旗子效果

以下是具体实现代码:

<div class="container">
    <div class="flag"></div>
</div>
.container {
  width: 500px;
  height: 500px;
  background-color: lime;
  position: relative;
}

.flag {
  position: absolute;
  left: 150px;
  top: 100px;
  height: 50px;
  border-width: 100px;
  border-style: solid;
  border-color: red red rgba(0, 0, 0, 0) red
}

以上方法的实现思路是将一个div的宽设置为0,依靠border的宽度来展现视觉效果,再通过border-color属性来将边框的其中一个角设置透明化(rgba()最后一个参数可设置透明度)

小箭头效果

以下是具体实现代码:

<div class="container">
    <div class="left">
      图片
    </div>
    <div class="right">
      介绍文本
    </div>
</div>
.left {
  float: left;
  width: 60%;
  height: 100%;
  background-color: mediumblue;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
}

.right {
  float: right;
  width: 40%;
  height: 100%;
  background-color: goldenrod;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  position: relative;
}

.right::after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px;
  border-color: rgba(0, 0, 0, 0) goldenrod rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  position: absolute;
  left: -40px;
  top: 100px;
}

实现该效果的关键同样在于border-color,相比于上一个例子,这一次是通过伪类::after使用相对定位来实现的。将四个边角中的三个设置透明(border-color参数对应位置分别为:上、右、下、左)。注意:在将其创建出来后需要向左或向右平移一段距离,平移的距离为设定的边框宽度的两倍。

$flag 上一页 下一页