css三角形的制作

最新推荐文章于 2024-05-17 17:44:56 发布

MRSLLLL_

最新推荐文章于 2024-05-17 17:44:56 发布

阅读量453

点赞数 1

分类专栏： css/html 文章标签： css border边框

本文链接：https://blog.csdn.net/MRSLLLL_/article/details/89428156

版权

css制作三角形的原理很简单，主要就是将盒子的宽高设为0，加上边框的宽度和颜色

分解步骤给大家看一下，先定义一个宽高10px的灰色黑字

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box {
      width: 10px;
      height: 10px;
      background-color: #ccc;
      border-style: solid;
      border-width: 30px;
      border-color: red green blue orange;
    }
  </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在这里插入图片描述
出来的效果为这样，中间是盒子自身的宽高

将box宽高改为0，想要哪条边的三角形，就将其与三边的边框颜色改为transparent（透明的意思）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <titl

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

MRSLLLL_

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css三角形的制作

css制作三角形的原理很简单，主要就是将盒子的宽高设为0，加上边框的宽度和颜色分解步骤给大家看一下，先定义一个宽高10px的灰色黑字<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &...
复制链接

扫一扫