html 요소에서 도형을 자르는 방법

나는이 2 일 동안 클립, 클립 경로, 마스킹 및이 CSS 주제에 대해 알아야 할 모든 것을 읽었습니다. 그러나 다음을 달성하는 방법을 알아낼 수 없습니다.html 요소에서 도형을 자르는 방법

붉은 색 몸체 색이 있습니다. 은 전체 너비의 전체 높이 div이며 흰색입니다. (빨간 몸이 보이지 않습니다). 빨간색 배경을 약간 보여주기 위해 흰색 div에서 모양을 잘라 내고 싶습니다.

어떻게 수행 할 수 있는지 아시나요?

많은 감사를드립니다!

감사합니다.

마리오.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
</head> 
<body> 
<div class="container"> 


<!--<div class="svgMask" width="0" height="0"> 
    <svg> 
     <defs> 
      <mask id="svgmask2"> 
       <image width="100%" height="100%" xlink:href="assets/images/masks/triangle-1-mask.svg"/> 
      </mask> 
     </defs> 
     <image mask="url(#svgmask2)" width="100%" height="100%" y="0" x="0" xlink:href="https://dl.dropboxusercontent.com/u/32494584/backdrop.jpg"/> 
    </svg> 
</div>--> 

<div class="mask"> 

</div> 

</div> 

</body> 
</html>

CSS를

body{ 
     background:red; 
    } 
    .mask{ 
     position: absolute; 
     left:0; 
     right:0; 
     top:0; 
     bottom:0; 
     background: white; 
     -webkit-clip-path: polygon(100px 100px, 200px 0px, 500px 500px); 
    }

감사

출처

2016-08-05 MarioVde

당신은 당신의 코드 나 바이올린 링크를 게시 할 수 있습니다. – Jainam

왜이 제품이 필요한가요? –

좋아, 난 당신의 요구에 맞는 여기에 해결책을 찾은 것 같아요!

.clip-text { 
 
    font-size: 6em; 
 
    font-weight: bold; 
 
    line-height: 1; 
 
    position: relative; 
 
    display: inline-block; 
 
    margin: .25em; 
 
    padding: .5em .75em; 
 
    text-align: center; 
 
    /* Color fallback */ 
 
    color: #fff; 
 
    -webkit-background-clip: text; 
 

 
    -webkit-text-fill-color: transparent; 
 
} 
 

 
.clip-text:before, 
 
.clip-text:after { 
 
    position: absolute; 
 
    content: ''; 
 
} 
 

 

 
.clip-text:before { 
 
    z-index: -2; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: inherit; 
 
} 
 

 

 
.clip-text:after { 
 
    position: absolute; 
 
    z-index: -1; 
 
    top: .125em; 
 
    right: .125em; 
 
    bottom: .125em; 
 
    left: .125em; 
 
    background-color: #000; 
 
} 
 

 

 
.clip-text--no-textzone:before { 
 
    background-position: -.65em 0; 
 
} 
 

 
.clip-text--no-textzone:after { 
 
    content: none; 
 
} 
 

 
.clip-text--cover, 
 
.clip-text--cover:before { 
 
    background-repeat: no-repeat; 
 
    -webkit-background-size: cover; 
 
      background-size: cover; 
 
} 
 

 
.clip-text_one { 
 
    background-image: url(http://lorempixel.com/480/200/abstract/7); 
 
}

<div class="clip-text clip-text_one">THIS IS CUT OUT</div>

출처

2016-08-05 08:34:59 RasmusGlenvig

왜 이것에 대한 투표를 내려야합니까, 설명 해주십시오 :) – RasmusGlenvig

답장을 보내 주셔서 감사합니다. 그러나 실제 "잘라내어야"합니다. 백그라운드에서 물건이 생기기 때문에 배경을 볼 필요가 있습니다. 예 : 배경이 영화 또는 이미지 인 경우 표시해야합니다. 배경색이 같은 도형을 만드는 대신 – MarioVde

방금 내 대답을 편집했고, 내가 필요한 것을 발견했다고 생각합니다. :) – RasmusGlenvig

html 요소에서 도형을 자르는 방법

답변

관련 문제