2025年3月15日 星期六 甲辰(龙)年 月十四 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

「后端小伙伴来学前端了」CSS 做三角边框,必会的基础操作之一

时间:06-14来源:作者:点击数:49

前言:

这个也是我最近学习才发现的一个细节,就是常常会在一些网站,看到下面图中这样的一个小三角,以前没怎么学CSS,我一直以为它是个精灵图之类。😂

image-20211103082647234

我是最近才开始认真学的前端,比纯小白稍微懂的稍微多一点点。

文章如若有那些不足之处,请及时指出,在此郑重感谢。

一、CSS三角做法

我们先简单说一下,如何把三角画出来,懂用什么画的之后,基本就完事了。

html代码:

  • <div class="sanjiao">
  • </div>

css代码:

  • .sanjiao {
  • /* 为了好看让它居中 */
  • margin: 0 auto;
  • /* 高度和宽度必须指定为零 */
  • width: 0;
  • height: 0;
  • /* 给四边都设置边框和颜色 */
  • border-bottom: 10px solid #FFD5A1;
  • border-top: 10px solid #00A1D6;
  • border-left: 10px solid saddlebrown;
  • border-right: 10px solid seagreen;
  • }

我们先来看看代码效果,之后再谈论其他的哈

image-20211103084510897

页面展示效果就是一个四个小三角拼成的正方形。

原理是什么呢?

盒子每一边的边框都是梯形的,盒子大小为0时,梯形上底(边框内边)也为0,所以两边会合并成三角形。

原理图大致就如下:

image-20211103085715327

当最后它中间的盒子宽度、高度都为零,就成了角形。

二、CSS京东应用

原理知道了之后,我们来做一个小小的案例吧。

html代码:

  • <div class="main">
  • <div class="box1">
  • </div>
  • <!-- 再写一个div来做三角 -->
  • <div class="box2">
  • </div>
  • </div>

css代码:

  • .mian {
  • /* 我们再给父元素设置一个相对定位*/
  • position: relative;
  • }
  • .box1 {
  • margin-top:10px;
  • width: 100px;
  • height: 100px;
  • background-color: #81c784;
  • border-radius:5px;
  • }
  • .box2 {
  • width: 0px;
  • height: 0px;
  • /* 设置四边边框宽度,将颜色设置为透明 */
  • border: 10px solid transparent;
  • /* 再进行下面的设置,这样之后就会出现一个紫色向上的一个小三角*/
  • border-bottom: 10px solid #E1BEE7;
  • position: absolute;
  • left: 80px;
  • top: -10px;
  • }
  • </style>

最后的成果大致如下:

image-20211103090900682

css这个边框还有很多可以玩,还在学习中…

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门