html - 如何更改维恩图中的交叉点颜色?
问题描述
我正在尝试更改维恩图中交叉点的颜色。
这是一支笔,展示了我到目前为止所做的事情: https ://codepen.io/amolmt/pen/VJxNxM
.circle {
position: absolute;
width: 55%;
height: 55%;
border-radius: 50%;
p.circle__header {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 100%;
max-width: 170px;
text-align: center;
font-size: 22px;
color: white;
}
}
我希望交叉点颜色的输出是白色的。
解决方案
Venn diagram by using only css and html
**Html code**
<div id="outer1" class="outer">
</div>
<div id="outer2" class="outer">
</div>
<div id="midw1">
<div id="mid1" class="mid"></div>
</div>
<div id="midw2">
</div>
</div>
</div>
**css code**
div {
width: 240px;
height: 240px;
position: absolute;
border-radius: 50%;
}
.innerw {
left: 0px;
top: 0px;
overflow: hidden;
}
.innerw2 {
left: 170px;
top: 0px;
overflow: hidden;
}
.inner {
left: -85px;
top: 130px;
background-color: palegreen;
z-index: 20;
}
.inner:hover {
background-color: green;
}
#midw1 {
left: 0px;
top: 0px;
overflow: hidden;
}
#mid1 {
left: 170px;
top: 0px;
}
#midw2 {
left: 0px;
top: 0px;
overflow: hidden;
}
#mid2 {
left: 85px;
top: 130px;
}
#midw3 {
left: 170px;
top: 0px;
overflow: hidden;
}
.mid {
background-color: white;
z-index: 15;
}
#outer1 {
left: 0px;
top: 0px;
background:orange
}
#outer2 {
left: 170px;
top: 0px;
background:red
}
#outer3 {
left: 85px;
top: 130px;
}
.outer {
background-color: orange;
z-index: 10;
}
推荐阅读
- python - 无法通过单击快捷方式启动 jupyter notebook
- sql-server - 如何通过完成其他 sql 作业来启动 sql 作业?
- powerbi - 如何在指定的过滤器上下文中返回度量的最小值/最大值?
- kubernetes - Kubernetes 入口不工作,默认后端 404
- java - 我应该如何使用 JAVA 在 Android Studio 中创建圆形图像视图
- html - 调整窗口大小时防止 div 块偏移
- python - Django-recaptcha 总是显示“此字段是必需的”。甚至,它就在那里
- java - java - 如何在放心的java中将字符串列表传递到POST请求正文中?
- asp.net-mvc - 如何在我的应用程序中添加 kentico 的页面构建器?
- python - Flask RESTful API 翻译