HTML + CSS 连载 | 40 - border 图形

一、border 图形实现

实际开发中 border 属性主要是用来给盒子添加边框的,但是在开发中我们也可以利用边框的一些特性来实现一些形状,比如一些页面中常用到的三角形等。

接下来我们可以使用 border 属性来实现一个三角形,首先创建 HTML 页面,添加一个盒子,并且给盒子设置一个边框,具体代码如下:

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      margin: 0 auto;
      width: 100px;
      height: 100px;
      background-color: #f00;
      
      border: 30px solid olivedrab;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

在浏览器中打开 HTML 页面,具体效果如下:

此时盒子所占据的宽度为 (100+30+30)px,我们需要设置 box-sizing 属性的属性值为 border-box,让盒子所占据的宽度包含内容和边距的长度,具体 CSS 代码如下所示:

CSS 复制代码
.box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #f00;

  border: 30px solid olivedrab;

  box-sizing: border-box;
}

刷新页面,效果如下:

可以看到盒子变小了,接下来我们需要设置 border 四条边的样式,给每条边一个不同的背景颜色,具体 CSS 代码如下:

CSS 复制代码
.box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #f00;

  border: 30px solid olivedrab;
  border-right-color: blue;
  border-bottom-color: aqua;
  border-left-color: blueviolet;

  box-sizing: border-box;
}

刷新页面,效果如下:

接着我们尝试把增加 border 的宽度为 40px:

CSS 复制代码
border: 40px solid olivedrab;

刷新页面,效果如下:

再次增加 border 的宽度为 50px:

CSS 复制代码
border: 50px solid olivedrab;

刷新页面,效果如下:

可以看到此时内容的宽度已被压缩为0,整个盒子所占据的宽度就是 border 的宽度,设置其他几条变为透明,具体 CSS 代码如下:

CSS 复制代码
.box {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #f00;

  border: 50px solid olivedrab;
  /* border-right-color: blue;
  border-bottom-color: aqua;
  border-left-color: blueviolet; */
  /*设置为透明*/
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;

  box-sizing: border-box;
}

再次刷新页面,效果如下:

还需要将背景颜色也设置为透明,或者干脆不设置背景颜色:

CSS 复制代码
background-color: transparent;

再次刷新页面,效果如下:

可以看到我们已经实现了一个三角形,我们可以通过调整边框的宽度来实现大小不同的三角形。

二、border 图形旋转

实现了三角形之后还可以通过 transform 属性来让三角形选中,比如设置如下 CSS 代码:

CSS 复制代码
/*旋转*/
transform: rotate(90deg);

刷新页面,效果如下:

可以看到三角形旋转了 90 度,我们也可以设置旋转的中心点,比如下面 CSS 代码所示:

CSS 复制代码
/*旋转*/
transform: rotate(90deg); 
transform-origin: center 25%;

再次刷新页面,效果如下:

可以看到此时旋转后的位置与不设置中心点之前旋转的位置发生了偏移,当然我们也可以设置旋转更大的角度,比如下面的 CSS 代码:

CSS 复制代码
/*旋转*/
transform: rotate(180deg); 
transform-origin: center 25%;

刷新页面,效果如下:

利用 border 或者 CSS 特性我们可以做出很多图形,可以通过这个网站来查看更多的图形的实现。

相关推荐
大厂码农老A几秒前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER2 分钟前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父5 分钟前
前端速通—CSS篇
前端·css
pixle09 分钟前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏
ssf198715 分钟前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH15 分钟前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童20 分钟前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
非凡ghost25 分钟前
火狐浏览器(Firefox)tete009 Firefox 多语便携版
前端·firefox
文心快码BaiduComate25 分钟前
文心快码Comate3.5S更新,用多智能体协同做个健康管理应用
前端·人工智能·后端
袁煦丞29 分钟前
极空间变身全能私有云+1Panel傻瓜式部署:cpolar内网穿透实验室第618个成功挑战
前端·程序员·远程工作