css交叉圆

最新推荐文章于 2024-01-05 16:23:43 发布

随风九天

最新推荐文章于 2024-01-05 16:23:43 发布

阅读量1.1k

点赞数 1

分类专栏：前端文章标签： css交叉圆

本文链接：https://blog.youkuaiyun.com/qiuyufeng/article/details/101409665

版权

前端专栏收录该内容

26 篇文章

订阅专栏

这篇博客介绍了如何使用CSS创建表示不同表连接关系的交叉圆图表，包括左连接、右连接、内连接和全连接。通过点击图形，可以切换不同的连接方式。全连接的实现关键在于处理中间边线的样式，主要涉及JavaScript的实现。

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

1 说明

使用交叉圆来表达两个表的连接关系：左连接，右连接，内连接，全连接。并且可以点击图形切换连接方式。

2 html

<div class="imgDiv">
 <div class="leftCircle" :class="{'select':leftSelect}" 
 :style="leftStyle" v-on:click="selectLeft">
 </div>
<div class="rightCircle" :class="{'select':rightSelect}" 
:style="rightStyle" v-on:click="selectRight">
</div>
<div class="oval" :style="centerStyle" v-show="centerShow">
</div>
</div>

3 css

 .imgDiv .leftCircle {
	position: relative;
	top: 50px;
	left: 104px;
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #9873ed;
	border-radius: 50px;
	opacity: 0.3;
}

 .imgDiv .rightCircle {
	display: inline-block;
	top: 50px;
	left: 85px;
	width: 50px;
	height: 50px;
	background-color: #9873ed;
	border-radius: 50px;
	position: relative;
	opacity: 0.3;
}

.imgDiv .oval {
	display: inline-block;
	position: relative;
	top: 38px;
	left: 25px;
	width: 27px;
	height: 27px;
	background-color: #9873ed;
	border-radius: 21px 0px;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

 .imgDiv .select {
	opacity: 1;
}

.imgDiv .leftCircle:hover {
	cursor: pointer;
}

 .imgDiv .rightCircle:hover {
	cursor: pointer;
}

.imgDiv .oval:hover {
	cursor: pointer;
}

4 效果图

在这里插入图片描述

5 脚本

全连接主要js需要编写处理中间部分的边线样式。

var centerStyle = { "border": '1px solid white' };