border、transparent写超简单的三角形

_MadD

已于 2023-05-23 17:51:37 修改

阅读量3.8k

点赞数 4

分类专栏：面试题汇总文章标签： javascript 前端开发语言 css css3

于 2020-10-23 10:28:57 首次发布

本文链接：https://blog.csdn.net/weixin_45849112/article/details/109236966

版权

面试题汇总专栏收录该内容

8 篇文章 2 订阅

订阅专栏

transparent：background-color的默认值，背景颜色是透明的（基本内容将会穿透）。

border：元素的边框，实际上元素的border是由三角形组合而成，并不是矩形，当元素是指了宽度时会显示成矩形。

eg1：只设置边框，设置不同背景色

<body>
<!-- background-color属性之transparent -->
<div></div>
</body>
<style>
      div {
        width: 0;
        height: 0;
        border-top: 20px solid lightblue;
        border-left: 20px solid lawngreen;
        border-right: 20px solid lightpink;
        border-bottom: 20px solid lightsalmon;
      }
</style>

效果图：在这里插入图片描述
等腰直角三角形：给元素设置边框大小border-width:20px,设置border-style：solid实线显示，设置border边框的背景色border-color：color，color，color，color；依次是上、右、底、左，将其中一边设颜色，其他设为透明色，如下：

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>transparent</title>
   <style>
     div {
       width: 0;
       height: 0;
       border-width: 20px;
       border-style: solid;
       border-color: red transparent transparent transparent
     }
</style>
</head>
 <body>
<!-- background-color属性之transparent -->
	<div></div>
</body> 
</html>

效果图：在这里插入图片描述
这是四边边框都设置了大小以及背景为透明，当边框设置不同的大小时，可以得到不同的其他图形，如梯形

<style>
 2     div {
 3       width: 0;
 4       height: 0;
 5       border-top: 20px solid lightblue;
 6       border-left: 10px solid transparent;
 7       border-right: 10px solid lightblue;
 8       /* border-bottom: 10px solid lightblue; */
 9     }
10   </style>

效果图：在这里插入图片描述

微信公众号：求之（ID：qiuzhi1818）
前进，不停就好。无论面对什么，都不要停下。
在这里插入图片描述

_MadD

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
border、transparent写超简单的三角形

transparent：background-color的默认值，背景颜色是透明的（基本内容将会穿透）。border：元素的边框，实际上元素的border是由三角形组合而成，并不是矩形，当元素是指了宽度时会显示成矩形。eg1：只设置边框，设置不同背景色<body><div></div></body><style> div {
复制链接

扫一扫

专栏目录