CSS๐Ÿ”ง/css

CSS-border๋กœ ์‚ผ๊ฐํ˜• ๋งŒ๋“ค๊ธฐ transparent ์†์„ฑ๊ฐ’ ์‚ฌ์šฉ

hyojinny 2022. 9. 16. 18:00

transparent ๋œป : ํˆฌ๋ช…ํ•œ

์‚ผ๊ฐํ˜•์„ ๋งŒ๋“ค์–ด์ค„๋•Œ 

ํ•œ๊ณณ์—๋งŒ ์ง€์ •ํ•ด ์ƒ‰์„ ์ฑ„์›Œ์ค€๋‹ค.

์ „์ฒด ์ƒ‰ ์ฃผ๊ธฐ border: 20px solid red;
์™ผ์ชฝ border-left-color: blue;
์˜ค๋ฅธ์ชฝ border-right-color:yellow;
 

 

๋ณด๋”์˜ ์›๋ž˜ ์ƒ๊น€์ƒˆ 

 border: 20px solid transparent;

ํˆฌ๋ช…์ƒ‰์ฃผ๊ธฐ

 
 
 
๋ฒ„ํŠผ์— ํ•œ์ชฝ์—๋งŒ ํ™”์‚ดํ‘œ๋ฅผ ์ค˜์„œ ์ƒ‰์„ ์ฑ„์šธ๋•Œ
.lang_wrap .btn_lang:after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -1px;
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top-color: #ccc;

๊ธฐ์กด ๋ฒ„ํŠผํƒ€์ž…์•ˆ์— ๊พธ๋ฏธ๊ธฐ after ์„ ์ค˜์„œ ๋„ฃ์–ด์ค€๋‹ค.