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参数对应位置分别为：上、右、下、左）。注意：在将其创建出来后需要向左或向右平移一段距离，平移的距离为设定的边框宽度的两倍。