[css] css三角形-边框三角形(各种角度)

最新推荐文章于 2022-08-20 22:22:58 发布

lyt-top

最新推荐文章于 2022-08-20 22:22:58 发布

阅读量839

点赞数

文章标签： html css css3

本文链接：https://blog.youkuaiyun.com/qq_34450741/article/details/107451726

版权

介绍一款基于Vue2.x和ElementUI的后台管理系统模板，名为vue-admin-wonderful，旨在帮助开发者快速构建美观且功能丰富的管理界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

彩蛋：后台管理系统一站式平台模板

vue-admin-wonderful，一套为开发者快速开发准备的基于 vue2.x 越看越精彩的后台管理系统一站式平台模板。基于element ui 2.14.0

一、效果图

在这里插入图片描述

二、代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.sjx-t {
				width: 0;
				height: 0;
				border-left: 70px solid transparent;
				border-right: 70px solid transparent;
				border-bottom: 100px solid red;
			}

			.sjx-r {
				width: 0;
				height: 0;
				border-top: 70px solid transparent;
				border-bottom: 70px solid transparent;
				border-left: 100px solid red;
			}

			.sjx-b {
				width: 0;
				height: 0;
				border-left: 70px solid transparent;
				border-right: 70px solid transparent;
				border-top: 100px solid red;
			}

			.sjx-l {
				width: 0;
				height: 0;
				border-top: 70px solid transparent;
				border-bottom: 70px solid transparent;
				border-right: 100px solid red;
			}

			.sjx-box {
				width: 300px;
				height: 100px;
				border: 1px solid #ccc;
				position: relative;
				margin: 40px;
				border-radius: 2px;
			}

			.sjx-box::before {
				content: '';
				position: absolute;
				left: -10px;
				top: 50%;
				transform: translateY(-50%);
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
				border-right: 10px solid #ccc;
			}

			.sjx-box::after {
				content: '';
				position: absolute;
				left: -8px;
				top: 50%;
				transform: translateY(-50%);
				border-top: 6px solid transparent;
				border-bottom: 6px solid transparent;
				border-right: 10px solid white;
				/* background: linear-gradient(to bottom, #fff 0%, #09f 100%); */
			}
		</style>
	</head>
	<body>
		<!-- 三角形（上右下左） -->
		<div class="sjx-t"></div>
		<div class="sjx-r"></div>
		<div class="sjx-b"></div>
		<div class="sjx-l"></div>

		<!-- 带气泡（before，after画2三角形，然后定位） -->
		<!--画法参看：三角形（上右下左）-->
		<div class="sjx-box">111</div>
	</body>
</html>