html - 用css重新设计两个相邻的div
问题描述
我被分配了一个任务来设计两个这样的 div
到目前为止,这是我尝试过的,我想用一些 css 重新设计它。我非常感谢任何有关样式的帮助。(它不必与给定的图像相同)。
谢谢你。这是我的 HTML 和 CSS 代码 HTML 代码:
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .stage+.stage {
margin-left: 30px;
}
.stage:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 100px solid transparent;
border-left: 10px solid white;
border-bottom: 110px solid transparent;
margin: -10px 0px 0 0px;
}
.stage:after {
color: #4D81BF;
border-left: 20px solid;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -20px;
top: 0;
}
.stage {
background-color: #4D81BF;
/*width: 150px; */
height: 200px;
line-height: 40px;
display: inline-block;
position: relative;
}
.stage {
color: ;
font-weight: bold;
padding-left: 10px;
font-family: Arial;
font-size: 11;
}
#it,
#isms,
#bul {
color: white;
}
#it {
border: 3px solid white;
background-color: green;
}
#isms,
#bul {
border: 3px solid white;
background-color: orange;
}
<div class="container">
<div class="stage">
<span class="blocktext">Stage Confirm</span>
<div id="it">IT CONFIRM</div>
<div id="isms">ISMS Confirm</div>
</div>
<div class="stage">
<span class="blocktext">Stage Approve</span>
<div id="bul">Bul Approve</div>
</div>
</div>
解决方案
我相信这会对你有所帮助。我想清理整个 CSS,但不想对您的原始代码进行很多更改,所以您不会感到困惑。
.button {
width: 200px;
padding: 0 10px;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.container .stage+.stage {
margin-left: 30px;
}
.stage:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 95px solid transparent;
border-left: 70px solid white;
border-bottom: 95px solid transparent;
margin: -20px 0px 0 0px;
}
.stage:after {
color: #4D81BF;
border-left: 70px solid;
border-top: 95px solid transparent;
border-bottom: 95px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -70px;
top: 0;
}
.stage {
background-color: #4D81BF;
/*width: 150px; */
height: 150px;
line-height: 40px;
display: inline-block;
position: relative;
margin: 20px;
font-weight: bold;
padding: 20px 40px 20px 100px;
font-family: Arial;
font-size: 11;
}
#it,
#isms,
#bul {
color: white;
}
#it {
border: 3px solid white;
background-color: green;
margin: 0 0 10px 0;
}
#isms,
#bul {
border: 3px solid white;
background-color: orange;
}
<div class="container">
<div class="stage">
<span class="blocktext">Stage Confirm</span>
<div id="it" class="button">IT CONFIRM</div>
<div id="isms" class="button">ISMS Confirm</div>
</div>
<div class="stage">
<span class="blocktext">Stage Approve</span>
<div id="bul" class="button">Bul Approve</div>
</div>
</div>
推荐阅读
- python-3.7 - 将 Dicom 像素值重新缩放到 [0,1] 范围内
- jsf - 从模板创建的 JSF 页面无法正常工作
- wpf - WPF 条件数据网格分组
- gimp - 如何使 Alpha 通道更不透明?
- python - 矩形 Pygame 上的缺失角
- typescript - 为什么 Typescript 无法识别我赋予我的“useState”状态变量的类型?
- excel - VBA图表图例不显示名称系列,显示类别
- cplex - IF / Else 定义变量时
- python - 循环列以验证条件并在需要时使用 pandas 更改单元格值
- html - 为什么 Bootstrap Collapse 不会为每次迭代显示不同的项目?