html - 使用颜色使 div 顶部边框宽度增加到底部
问题描述
有人可以从以下内容中帮助我吗
到下面这个
我无法red
用 CSS 制作这个边框。帮助表示赞赏。忽略 div 的宽度。我唯一需要帮助的是red
背景部分。到目前为止我的代码:
.location-dtls {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
flex: 0 0 15%;
max-width: 15%;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80px;
overflow-wrap: break-word !important;
cursor: pointer;
text-align: center;
margin-bottom: 1.5rem;
margin: 0.5rem;
border-width: 0.001rem;
border-style: solid;
border-radius: 1rem;
border-color: #e4e2e2;
}
<div class="location-dtls">
<div>Location 5</div>
<div>Location 5 FN</div>
</div>
解决方案
您可以使用 pesudo 元素来执行此操作:
.location-dtls {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
flex: 0 0 15%;
max-width: 15%;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80px;
overflow-wrap: break-word !important;
cursor: pointer;
text-align: center;
margin-bottom: 1.5rem;
margin: 0.5rem;
border-width: 0.001rem;
border-style: solid;
border-radius: 1rem;
border-color: #e4e2e2;
}
.location-dtls::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 10px;
background-color: red;
border-radius: 1rem;
}
<div class="location-dtls">
<div>Location 5</div>
<div>Location 5 FN</div>
</div>
推荐阅读
- css - 我的 CSS 定位在 Code Pen 和 Chrome 之间是不同的
- excel - Excel公式从绝对路径到相对路径
- mysql - 我如何找到列的排序规则,因为我得到不同的结果取决于我在哪里看?
- javascript - 使用 https 在新窗口中打开 SSRS URL 问题
- paypal - 没有贝宝账户的用户使用信用卡订阅贝宝
- c# - 移动时像素化的字符变形。滞后输入
- azure - 从 azure 函数应用监视 azure 磁盘上的文件夹
- reactjs - 如何在 React Router v4 中的 URL 更改时允许临时抽屉关闭而内容不消失?
- c++ - “类”没有命名类型
- python - 每个星期五@startup 运行 cronjob 的语法应该是什么?