前端CSS实现八卦图，三角形

最新推荐文章于 2024-04-11 09:40:01 发布

靳小霞

最新推荐文章于 2024-04-11 09:40:01 发布

阅读量1k

点赞数

分类专栏： Html5 CSS 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/u012493556/article/details/109225805

版权

浅谈前端CSS中的一个硬核属性-border

前言

了解过前端的都知道，html 所有的标签都离不开border属性，Border,顾名思义，边框，给标签加个边框，就像我们生活中的窗户框子，Border除了可以设置标签的边框之外，还有很多隐藏的特殊功能，比如，可以'画'个图，可以达到和canvas一样的效果。

一、使用border画出一个太极八卦图

1.效果图如下

像这样的八卦图，除了可以使canvas画出来，我们强大的CSS的border属性也可以实现，在这里我们使用的是border的小儿子属性 border-radius ,该属性的作用的为元素添加圆角边框！

语法：border-radius: 1-4 length|% / 1-4 length|%;

border-radius:2px;

等价于：

border-top-left-radius:2px;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
border-bottom-left-radius:2px;

按此顺序设置每个 radius的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同。

2.实现思路图解

3.废话不多说，直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.container{
				 margin: 10% 10%;
				 }
			.tj{
				 width: 800px;
				 height: 600px;
				
			}	 
			.tj-left{
				float: left;
				width: 200px;
				height:400px;
				border: 1px solid #000000;
				box-sizing: border-box;
			    border-radius:200px 0  0 200px ;
				border-left: 1px solid #fff;
				background-color: #F5F5F5;
				position: relative;
				
			}
            .tj-right{
				 float: left;
				 width: 200px;
				 height: 400px;
				 box

最低0.47元/天解锁文章

靳小霞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端CSS实现八卦图，三角形

浅谈前端CSS中的一个硬核属性-border前言了解过前端的都知道，html 所有的标签都离不开border属性，Border,顾名思义，边框，给标签加个边框，就像我们生活中的窗户框子，Border除了可以设置标签的边框之外，还有很多隐藏的特殊功能，比如，可以'画'个图，可以达到和canvas一样的效果。一、使用border画出一个太极八卦图 1.效果图如下像这样的八卦图，除了可以使canvas画出来，我们强大的CS...
复制链接

扫一扫