border标签制作常见的形状

最新推荐文章于 2024-08-10 10:30:00 发布

小鲸鱼鱼

最新推荐文章于 2024-08-10 10:30:00 发布

阅读量570

点赞数 1

分类专栏：前端知识文章标签： css

本文链接：https://blog.csdn.net/qq_45174540/article/details/105166329

版权

前端知识专栏收录该内容

8 篇文章 0 订阅

订阅专栏

经常在做网页导航栏的时候,有二级菜单的时候,有一个小三角形表示下拉的,其实很多基础的图形我们都是可以直接用代码写出来的,下面来简单介绍几个栗子叭~

1.三角形

.triangle1{
  	width: 0;
 	height: 0;
 	border: 50px solid #FBAAC3;
  	border-top-color: transparent;
  	border-left-color: transparent;
  	border-right-color: transparent;
  	border-top: none;
  }
.triangle2 {
    width: 0;
 	height: 0;
    border: 50px solid #FBAAC3;
    border-width: 30px 50px;
    border-top-color: transparent;
    border-right-color: transparent;
}
.triangle3{
    width: 0;
 	height: 0;
    border: 50px solid #FBAAC3;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
 }

三角形1
三角形2
三角形3
小松树小松树
在这里插入图片描述

2. 菱形

    .diamond {
      width: 0;
      height: 0;
      border: 40px solid #FBAAC3;
      transform: rotate(45deg);
    }

菱形1
制作菱形还可以用两个盒子来制作，第一个盒子的下边框和第二个盒子的上边框

    .diamond2 {
      width: 0;
      height: 0;
      border: 40px solid #FBAAC3;
    }
    .diamond2.p1 {
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }
    .diamond2.p2 {
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }

3.梯形

    .trapezoid {
      width: 100px;
      height: 0;
      border: 40px solid #FBAAC3;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top: none;
    }