html - Html5边框-半径反向填充
问题描述
我想按照以下设计图像实现下拉按钮。请参阅下拉菜单在按钮中间之后开始。我的问题是按钮具有透明背景以利用来自根父 div 的背景图像。
到目前为止,我已经实现了以下图像。正如我上面所说,我想在边界半径之外实现白色边缘。
.dropdown-header {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width: 210px;
height: 185px;
margin: auto;
}
.div-user-header {
width: 210px;
margin: auto;
position: relative;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.div-user-header-1 {
width: 206px;
height: 24px;
border: 2px solid #9CB2C7;
border-radius: 20px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
.div-user-header-1 a {
text-decoration: none;
color: #FCCC00;
display: block;
}
.div-user-header-list {
position: absolute;
background-color: white;
height: 170px;
width: 210px;
}
.div-user-header-2 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-2 {
height: 40px;
padding: 12px 15px;
}
.div-user-header-3 a {
text-decoration: none;
font-size: 12px;
color: #8C8C8C;
}
.div-user-header-3 {
height: 40px;
padding: 12px 15px;
}
.div-add-profile-card {
padding: 0px 15px;
}
.div-add-profile-card a {
text-decoration: none;
color: #8C8C8C;
font-size: 10px;
padding: 12px;
display: block;
border-top: 1px solid #D6D6D6;
}
<div class="dropdown-header">
<div class="div-user-header">
<div class="div-user-header-1">
<a href="#profileuser01">ProfileUser 01</a>
</div>
<div class="div-user-header-list">
<div class="div-user-header-2">
<img src="../../../assets/images/avtar2.png" width="34px" height="34px" style="padding-right: 5px; vertical-align: middle" />
<a href="#profileuser02">ProfileUser 01</a>
</div>
<div class="div-user-header-3">
<img src="../../../assets/images/user-02.png" width="30px" height="30px" style="padding-right:5px; vertical-align: middle" />
<a href="#profileuser03">ProfileUser 02</a>
</div>
<div class="div-add-profile-card">
<a href="add profile card"> + Add Profile Cards</a>
</div>
</div>
</div>
任何建议都会非常有帮助。
解决方案
推荐阅读
- html - 我不明白某些元标记的功能
- javascript - 如何查看 HTML 5 表单是否准备好提交?
- javascript - 如何为仪表添加过渡样式?(js,css,html)
- node.js - NPM 如何从 package-json 解析和运行脚本?
- spring-boot - 如何使用身份验证管理器修复“错误凭据”错误?
- swift - 如何使用 SwiftSyntax 库递归迭代 Swift 语法?
- javascript - 为什么 oldMember 和 newMember 的头像 url 在 guildMemberUpdate 中是相同的?(不和谐.js)
- r - 如何检查数据帧之间行元素的相似性
- html - CSS/Bootstrap 无法更改药丸颜色
- c# - C# 修改身份或添加声明