CSS : 특별한 모양을 만드는 방법

위와 같이 div를 만들고 싶습니다.
나는 이런 식으로 내 목표에 도달하려했지만 테두리 아래쪽을 들어 올리는 법을 모르겠다.

#myForm { 
 
    border-bottom: 100px solid green; 
 
    border-right: 70px solid transparent; 
 
    height: 0; 
 
    width: 150px; 
 
}

<div id="myForm"></div>

출처

2016-09-10 Daniel

은 왜 이미지를 사용? –

실제로 "HTML 양식을 사용하고 있지 않으며 약간 혼란 스럽기 때문에"양식 "에서"모양 "으로 단어를 변경할 수 있습니다. 번역 문제 일 가능성이 있습니까? – DBS

사용 CSS ::before 및 ::after 의사 요소가 필요한 경우 :!

html{ 
 
    background-color: #fff; 
 
} 
 

 
div{ 
 
    width: 300px; 
 
    height: 100px; 
 
    position: relative; 
 
    background-color: red; 
 
} 
 

 
div::before, div::after{ 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
} 
 

 
div::before{ 
 
    bottom: 0; 
 
    border-width: 0 0 50px 300px; 
 
    border-color: transparent transparent #fff transparent; 
 
} 
 

 
div::after{ 
 
    right: 0; 
 
    border-width: 0 20px 100px 0; 
 
    border-color: transparent #fff transparent transparent; 
 
}

<div></div>

JSFiddle

출처

2016-09-10 15:45:20 Vucko

안녕하세요, 정말 고마워요! 테두리는 선형이 아닙니다. 문제를 해결할 방법이 있습니까? – Daniel

선형 테두리 란 무엇입니까? – Vucko

-1

사용 마진 - 하단 : -100px; 예를 들어 사용이 중요한

출처

2016-09-10 15:39:28

왜? 어떻게 도움이됩니까? 스 니펫 관리 – dakab

당신은 :before & 같은 의사 요소를 탐구 할 것을 :after 아래 코드 스 니펫 어디서부터 시작해야할지에 대한 아이디어를 줄 것이지만, 특정 사건에 맞게 조정할 필요가있을 것입니다.

#myForm { 
 
    border-bottom: 100px solid green; 
 
    border-right: 70px solid transparent; 
 
    height: 0; 
 
    width: 150px; 
 
} 
 
div#myForm:after { 
 
    content: ""; 
 
    border-left: 222px solid green; 
 
    border-bottom: 27px solid transparent; 
 
    display: block; 
 
    position: absolute; 
 
    height: 0; 
 
    bottom: -127px; 
 
    z-index: 9999999; 
 
    left: 0; 
 
    right: 0; 
 
    width: 100%; 
 
}

<div id="myForm"></div>

출처

2016-09-10 15:50:49 UncaughtTypeError

CSS : 특별한 모양을 만드는 방법

답변

관련 문제