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

最新推荐文章于 2023-04-11 10:00:22 发布

lyt-top

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量769

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_34450741/article/details/107451726

版权

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

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>

lyt-top

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[css] css三角形-边框三角形(各种角度)

一、效果图二、代码<!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 transpa
复制链接

扫一扫