CSS 경계선을 사용하여 모양을 만들면 어떻게 반응합니까?

내가 CSS를 사용하여 모양을 만들려고하는 것은CSS 경계선을 사용하여 모양을 만들면 어떻게 반응합니까?

<div class="shape> 
</div>

가 여기에 위의 코드에 대한 CSS 국경 :

.shape{ 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
}

나는이 모양이 반응하고 싶습니다. 가능한가? 미리 감사드립니다 :)에서

출처

2016-12-05 Harish

너비와 높이에 %를 사용하십시오. – Troyer

너비에 %를 (를) 추가하십시오. –

@Troyer 너비 0 %가 여전히 0이고 테두리가 % – Justinas

사용 뷰포트 단위 : http://www.w3schools.com/cssref/css_units.asp

.shape{ 
 
width: 0; 
 
height: 0; 
 
border-left: 5vw solid transparent; 
 
border-right: 5vw solid transparent; 
 
border-bottom: 10vw solid red; 
 
}

<div class="shape"></div>

출처

2016-12-05 09:40:35

고마워. 한번 해봐. – Harish

효과가있었습니다! :) :) – Harish

CSS 단위 vh와

및 vw 당신은 뷰포트의 높이와 폭 (비율)을 기준으로하여 길이를 정의 할 수 있습니다 . CSS 비율로

border-width: 10vw;

, 당신은 position: absolute 또는 position: fixed을 갖는 가장 가까운 조상 요소를 기준으로하여 길이를 정의 할 수 있습니다. CSS 미디어 쿼리와

border-width: 10%;

, 당신은 귀하의 콘텐츠가 뷰포트 크기에 따라 다른 방식으로 렌더링되는 단계를 정의 할 수 있습니다.

.shape { 
    border-width: 100px; 
} 

@media (max-width: 600px) { 
    .shape { 
     border-width: 50px; 
    } 
}

이들은 모두 기본적인 CSS 기술입니다. 당신은 MDN에 예를 들어 다음에 대해 읽을 수 있습니다

출처

2016-12-05 09:45:46

효과가있었습니다! 명확한 설명과 참조에 대해 감사드립니다. – Harish

-1

는 동일한에 대한 부트 스트랩을 사용할 수 있습니다. 부트 스트랩을 사용하여 반응하는 것은 매우 쉽습니다. 또는 여백을 자동으로 설정하여 시도 할 수 있습니다.

출처

2016-12-05 09:58:21

<HTML> 
<head> 
<style> 
.shape{ 
width: 0; 
height: 0; 
border-left: 5vw solid transparent; 
border-right: 5vw solid transparent; 
border-bottom: 10vw solid red; 
} 
</style> 
</head> 
<div class="shape">ABC 
</div> 
</HTML>

출처

2016-12-05 10:07:30

이 코드 조각은 [설명 포함] (// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) 질문을 해결할 수 있지만, 정말 게시물의 품질을 향상시키는 데 도움이됩니다. 앞으로 독자의 질문에 답하고 있으며 코드 제안의 이유를 알지 못할 수도 있습니다. 또한 주석을 설명하기 위해 코드를 군중시키지 마십시오. 그러면 코드와 설명 모두 가독성이 떨어집니다! – kayess

CSS 경계선을 사용하여 모양을 만들면 어떻게 반응합니까?

답변

관련 문제