사각형의 다이아몬드 HTML 및 CSS3

Question

나는 사각형으로 다이아몬드를 만들고 싶습니다. 난 이미 사각형으로 그것을했다했습니다

.box { 
 
    width:100px; 
 
    height:100px; 
 
    background:orange; 
 
    z-index:1; 
 
    position:relative; 
 
} 
 

 
.box:before { 
 
    position:absolute; 
 
    content:''; 
 
    width:70.71%; 
 
    height:70.71%; 
 
    transform: rotate(45deg); 
 
    background: red; 
 
    top: 15%; 
 
    left: 15%; 
 
}

<div class="box"></div>

하지만이처럼 만들고 싶어 :이 같은 결코 있도록

사각형가 응답 크기. 어떤 생각?

덕분에 많은

Answer 1

당신은 사각형을 수정하여 다이아몬드를 만들려고하고 있습니다. 당신이 종이 직사각형으로 그것을 시도했다면, 그것에 대해가는 가장 간단한 방법이 아니라는 것을 이해할 것입니다.

당신은 clip-path 사용할 수 있습니다

.diamond { 
 
    background-color: #eee; 
 
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
 
      clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    padding: 2rem; 
 
}

<div class="diamond">I'm a diamond</div>

을 ... 그리고 모든 것을 당신이 할 수 있도록 남은 것은 (그 중 하나 또는 min-*/max-*)는 폭, 높이의 설정하는 것입니다 응답 비율로 그 비율을 제어하기 위해.

Do note CSS clip-path은 현재 IE와 Edge의 지원이 가장 부족한 적극적으로 사용되는 브라우저의 약 88 %에 불과하여 현재 supported입니다.

이들에 대한 지원이 필요한 경우 두 가지 수준의 래퍼를 사용하고 ::before 및 ::after 사이의 래퍼의 개요를 구성해야합니다.

Answer 2

이 접근법은 CSS border을 사용하여 생성 된 두 개의 삼각형을 사용합니다.

border 너비에 %을 사용할 수 없다고 생각합니다. 대신 뷰포트 단위를 사용했습니다.

.box { 
 
    width: 50vw; 
 
    height: 25vw; 
 
    background: orange; 
 
    z-index: 1; 
 
    position: relative; 
 
} 
 

 
.box:before, 
 
.box:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
} 
 

 
.box:before { 
 
    border-right: solid 25vw red; 
 
    border-top: solid 12.5vw transparent; 
 
    border-bottom: solid 12.5vw transparent; 
 
} 
 

 
.box:after { 
 
    right: 0; 
 
    border-left: solid 25vw red; 
 
    border-top: solid 12.5vw transparent; 
 
    border-bottom: solid 12.5vw transparent; 
 
}

<div class="box"></div>