만들기 육각형

임은 다음과 같이 닮은 CSS/HTML에서 육각형의 몇 가지를 만들려고 노력 :만들기 육각형

http://www.asta-uk.com/sites/all/themes/asta/logo.png

지금 내가 만든 하나 개의 육각형을하고, 그것을 다른 두를 복사하려고 시간은 있지만 두 번째 두 부분에는 윗부분이 보이지 않습니다.

이유가 무엇입니까?

PS는 IE를 사용하므로 IE 환경에서만 사용됩니다.

<html> 
    <HEAD> 

     <STYLE> 


.top 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid red; 
    border-top-color:transparent; 
    border-right-color:transparent; 
    border-bottom-color:red; 
    border-left-color:transparent; 
} 

.middle 
{ 
    height: 20px; 
    background: red; 
    width: 50px; 
    display: block; 
} 

.bottom 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid red; 
    border-top-color:red; 
    border-right-color:transparent; 
    border-bottom-color:transparent; 
    border-left-color:transparent; 
} 

<!-- Second Hex--> 

.top2 
{ 
    height:0; 
    width:50; 
    display: block; 
    border: 15px solid black; 
    border-top-color:transparent; 
    border-right-color:transparent; 
    border-bottom-color:black; 
    border-left-color:transparent; 
} 

.middle2 
{ 
    height: 20px; 
    background: black; 
    width: 50px; 
    display: block; 
} 

.bottom2 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid black; 
    border-top-color:black; 
    border-right-color:transparent; 
    border-bottom-color:transparent; 
    border-left-color:transparent; 
} 

<!--hex 3--> 

.top3 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid green; 
    border-top-color:transparent; 
    border-right-color:transparent; 
    border-bottom-color:green; 
    border-left-color:transparent; 
} 

.middle3 
{ 
    height: 20px; 
    background: green; 
    width: 50px; 
    display: block; 
} 
.bottom3 
{ 
    height:0; 
    width:50; 
    display: block; 
    border:15px solid green; 
    border-top-color:green; 
    border-right-color:transparent; 
    border-bottom-color:transparent; 
    border-left-color:transparent; 
} 




</STYLE> 
</HEAD> 
<BODY> 

<div class="hexagon"style="position: absolute; top: 0px; left: 2px;"> 
    <span class="top"></span> 
    <span class="middle"></span> 
    <span class="bottom"></span> 

</div> 
<!-- GREEN--> 
<div class="hexagon3" style="position: absolute; top: 48px; left: 55px;"> 
    <span class="top3"></span> 
    <span class="middle3"></span> 
    <span class="bottom3"></span> 

</div> 
<!-- black--> 
<div class="hexagon2" style="position: absolute; top: 120px; left: 40px;"> 
    <span class="top2"></span> 
    <span class="middle2"></span> 
    <span class="bottom2"></span> 

</div> 



</BODY 

</html>

출처

2012-07-12 Hiky

, 왜 이러는거야 -

이 의견은 CSS를 사용 HTML이 구문뿐만 아니라 css

위한 것으로 의미? HTML + CSS는 원본 삽화 제작을위한 것이 아니라 SVG에 더 적합합니다. – Dai

이메일에 사용되는 로고입니다. 이미지를 사용할 수없는 이유는 일부 메일 클라이언트가 이미지를 차단하기 때문입니다. – Hiky

이메일 용이라면 어쨌든 추천하지 않습니다. Outlook (2007 년 이후)은 Word의 HTML 렌더링 엔진을 사용합니다. 이 육각형이 렌더링되지 않을 것이라고 보장합니다. 대안은 로고 이미지를 모든 이메일에 첨부 파일로 포함시키는 것입니다. 그런 식으로 메일 클라이언트는 이미지를 차단하지 않습니다. – Dai

에 대한 width:50px;해야 px 추가 width:50;에 오타가 있습니다. >/* A comment */ 호기심에서

출처

2012-07-12 11:40:50 yogi

당신은 그래서는 CSS를  같은

및  가 버그가에서 주석을 제거 .top, .top2, .top3

출처

2012-07-12 11:40:46

나는 그것을 게시했지만 차이를 만들지 않았다 것으로 나타났습니다 : (두 번째 육각형의 상단 여전히 표시되지 않습니다. – Hiky

만들기 육각형

답변

관련 문제