Web/모각코

[ Visual Studio Code ] 도형 만들기

곽수진 2021. 12. 20. 01:16
반응형
div{
    width: 100px;
    height: 100px;
    background: pink;
    border-radius: 50%;
}

 

 


 

 

div{
    border-width: 10px;
    border-style: solid;
    border-color: pink;
    width: 100px;
    height: 100px;
}

 

 


 

 

div{
    border: 10px double deepskyblue;
    width: 100px;
    height: 100px;
}

 

 


 

 

div{
    border-top: 10px solid deepskyblue;
    border-right: 10px double deeppink;
    border-bottom: 10px dotted greenyellow;
    border-left: 10px dashed plum;
    width: 100px;
    height: 100px;
}

 

▶ css 전용 도형 정리 사이트

https://css-tricks.com/the-shapes-of-css/

 

The Shapes of CSS

CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add …

css-tricks.com

 

반응형