How can I show only corner borders?(20个答案)2天前关闭。我想只在容器的特定角落应用一个边框,类似于下图。在汇总容器的角落有一个小边框。我该如何实现呢?提前感谢你。
zzlelutf1#
这个答案更关注方法而不是漂亮的设计或图案。方法是:
border-radius
0px 0px 5px 5px
HTML代码,比如index.html
index.html
<html> <head> <title>Design</title> <link rel="stylesheet" href="style.css" /> </head> <body> <h1>Design</h1> <div id="reaction" class="item"> <div id="top-left" class="corner"></div> <div id="top-right" class="corner"></div> <div id="bottom-right" class="corner"></div> <div id="bottom-left" class="corner"></div> <div class="content"> <img src="icon.png" class="icon" /> <span class="title">Reaction</span> <span class="score">80 / 100</span> </div> </div> </body> </html>
以及CSS代码styles.css:
styles.css
.item { position: relative; border-radius: 5px; max-width: 300; } #reaction { background-color: #ffaaaa70; } .corner { position: absolute; } #reaction .corner { background: none; height: 10px; width: 10px; } #top-left { top: 0; left: 0; border-radius: 5px 0 0 0; border-top: 2px solid #ff7777; border-left: 2px solid #ff7777; } #top-right { top: 0; right: 0; border-radius: 0 5px 0 0; border-top: 2px solid #ff7777; border-right: 2px solid #ff7777; } #bottom-right { bottom: 0; right: 0; border-radius: 0 0 5px 0; border-bottom: 2px solid #ff7777; border-right: 2px solid #ff7777; } #bottom-left { bottom: 0; left: 0; border-radius: 0 0 0 5px; border-bottom: 2px solid #ff7777; border-left: 2px solid #ff7777; } .content { padding: 16px; display: flex; flex-direction: row; justify-content: space-between; } .icon { height: 24; width: 24; } .title { font-size: 16px; font-weight: bold; } #reaction .title { color: #ff7777; } .score { color: '#444444' }
从那里你可以申请其他项目与自己的颜色,并使用适当的模式,如果使用CSS框架。
hec6srdp2#
边框-下-右-半径:25px;左下边框半径:25像素;你可以把它写在一行里。边界半径:0px 0px 25px 25px;要为每个角设置不同的值,请使用以下语法边界半径:左上右上右下右下左;
rjee0c153#
边界半径:0像素x 0像素x 30像素x 30像素;第一个值应用于左上角,第二个值应用于右上角,第三个值应用于右下角,第四个值应用于左下角。
3条答案
按热度按时间zzlelutf1#
这个答案更关注方法而不是漂亮的设计或图案。方法是:
1.记住
border-radius
有4个值为每个角落一样0px 0px 5px 5px
绘制半径只在右下角和左下角,为您的第一个顶部的图像。最后看起来是这样的:
HTML代码,比如
index.html
以及CSS代码
styles.css
:从那里你可以申请其他项目与自己的颜色,并使用适当的模式,如果使用CSS框架。
hec6srdp2#
边框-下-右-半径:25px;左下边框半径:25像素;
你可以把它写在一行里。
边界半径:0px 0px 25px 25px;
要为每个角设置不同的值,请使用以下语法
边界半径:左上右上右下右下左;
rjee0c153#
边界半径:0像素x 0像素x 30像素x 30像素;
第一个值应用于左上角,第二个值应用于右上角,第三个值应用于右下角,第四个值应用于左下角。