CSS

Question

이 모양을 작성하는 것은이 이미지를 살펴 보시기 바랍니다 : 나는 CSS에서 모양의 종류를 그릴 수있는 방법

:-) 내 쓸모없는 페인트 기능에 대해 사과

을, div에 텍스트를 사용하지 않고 )처럼 순수 css.

예에서와 같이 곡선으로 만들려고했지만 중심에서부터 곡선처럼 커브를 만드는 방법을 모르겠습니다.

CSS에서 이런 종류의 모양을 만들려면 어떻게해야합니까?

감사합니다.

Answer 1

이 구현 방법 중 하나는 이지만은이 곡선의 환상을 유지하지 않을 것이라는 점에 유의하십시오. 그래서 이것이 얼마나 유용할지 확신 할 수는 없지만, 유스 케이스를 지정하지 않으면 어떤 방법 으로든 사용할 수있는 것처럼 게시할만한 가치가있는 것으로 보입니다. 진행 방법에 대한 아이디어 인 경우에만 :

#box { 
    display: block; 
    margin: 2em auto; 
    width: 10em; 
    height: 5em; 
    background-color: black; 
    position: relative; 
} 

#box:before { 
    position: absolute; 
    top: -1em; 
    left: 0; 
    right: 0; 
    height: 2em; 
    background-color: #fff; 
    content: ' '; 
    border-radius: 50%; 
} 

#box:after { 
    position: absolute; 
    bottom: -1em; 
    left: 0; 
    right: 0; 
    height: 2em; 
    background-color: #000; 
    content: ' '; 
    border-radius: 50%; 
} 

JS Fiddle demo.

Answer 2

당신의보기는 쉐브론 모양과 비슷하지만, 사실이 아니라면 용서해주십시오. 그렇다면 순수한 CSS를 사용하여 갈매기 형 모양을 만들 수 있기 때문에 운이 좋을 것입니다.

.chevron { 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 12px; 
 
    margin-bottom: 6px; 
 
    height: 60px; 
 
    width: 200px; 
 
} 
 

 
.chevron:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 51%; 
 
    background: black; 
 
    transform: skew(0deg, 6deg); 
 
} 
 
.chevron:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: 50%; 
 
    background: black; 
 
    transform: skew(0deg, -6deg); 
 
}

<div class="chevron"></div>

당신은보다 원래의 예와이 대단히 확대 편지의 한 부분을 클리핑에 의해 가능하다 here