배경 이미지가 필요한 경우 CSS로 모서리를 자르는 방법은 무엇입니까?

Question

image of what it should look like

안녕하세요. 위의 내용은 제가 작업중인 프로젝트의 이미지입니다. 이것은 내가 가지고 얼마나 멀리입니다 :

image of what it looks like now

상자가 매우 간단 만들기; 그러나 이제는 왼쪽 하단에이 커팅 코너를 만드는 방법을 알지 못합니다. 나는 많은 것들을 이미 시도해 왔고 배경이 투명하지 않지만 색의 블록 인 경우 대부분의 일이 작동합니다. 배경이이 이미지 일 필요가 있기 때문에 한면에 특정 색상을 표시하지 않고 잘라내 기 작업을 할 수 없습니다. 이건 내 코드입니다 : 여기 이와 같은, 이미 여러 가지를 시도했습니다

<div class="profile"> 
    // HTML content 
</div> 

<style> 
    profile { 
    border: 2px solid #fff; 
    color: #fff; 
    height: 100%; 
    padding: 10px; 
    width: 250px; 
</style> 

(내가 사용하지 않는 정확한 코드,하지만 난이 예 다음) :

.cut { 
    border: none; 
    position: relative; 
} 

.cut:before { 
    content: ""; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    border-bottom: 20px solid lightgrey; 
    border-left: 20px solid #e67e22; 
    width: 0; 
} 

이가 상처를 만듭니다 모퉁이에 있지만 단색의 블록이 있고 색이 아닌 이미지가 필요합니다.

아무에게도이를 수행하는 방법이 있습니까? 제안은 대단히 감사합니다. 감사!

Answer 1

요소 다음과 같이 하단 부분을 만들기 위해 전/당신은 사용할 수 있습니다 : 바닥이 토우 부분으로 분할

.profile { 
 
position:relative; 
 
display:inline-block; 
 
margin:50px; 
 
border:1px solid #000; 
 
border-bottom:none; 
 
width:100px; 
 
height:200px; 
 
background:#ccc; 
 
} 
 
.profile:after { 
 
content:" "; 
 
position:absolute; 
 
border:1px solid #000; 
 
height:20px; 
 
width:80px; 
 
bottom:-20px; 
 
right:-1px; 
 
border-top:0; 
 
border-left:0; 
 
background:#ccc; 
 
} 
 
.profile:before { 
 
content:" "; 
 
position:absolute; 
 
border-bottom:1px solid #000; 
 
height:29px; 
 
width:29px; 
 
transform:rotate(45deg); 
 
bottom:-15px; 
 
left:6px; 
 
background:#ccc; 
 
}

<div class="profile"></div>

: 두 국경 + 사각에있는 직사각형 하나의 테두리 °

45 회전이

NB 도움이되기를 바랍니다 : Becarefull이 희미한를 변경하는 경우 ensions

Answer 2

.profile { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 200px; 
 
    border-top: 2px solid #000; 
 
    border-left: 2px solid #000; 
 
    border-right: 2px solid #000; 
 
    padding: 20px; 
 
    box-sizing: border-box; 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
.profile h2 { 
 
    margin: 0 0 10px; 
 
} 
 

 
.profile p { 
 
    font-size: 14px; 
 
} 
 

 
.profile .bottom { 
 
    position: absolute; 
 
    bottom: -30px; 
 
    right: -2px; 
 
    width: 180px; 
 
    height: 30px; 
 
    border-bottom: 2px solid #000; 
 
    box-sizing: border-box; 
 
    border-right: 2px solid #000; 
 
} 
 

 
.profile .bottom::before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -10px; 
 
    bottom: -4px; 
 
    width: 2px; 
 
    height: 35px; 
 
    background-color: #000; 
 
    transform: rotate(-35deg); 
 
}

<div class="profile"> 
 
    <h2>Name</h2> 
 
    <p>Description</p> 
 
    <div class="bottom"></div> 
 
</div>

Answer 3

난 당신이 이런 일을 할 수 있도록, 대신 DIV의 이미지의 모서리를 잘라하려는 생각 :

body { 
 
    background: url('https://www.lunapic.com/editor/premade/o-paint-bucket.gif'); 
 
} 
 

 
.container { 
 
    display: inline-block; 
 
    width: 200px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
} 
 

 
.container .image_container { 
 
    width: 320px; 
 
    height: 550px; 
 
    overflow: hidden; 
 
    display: block; 
 
    position: relative; 
 
    transform: rotate(45deg); 
 
    margin-left: calc(260px - 360px); 
 
    margin-top: -40px; 
 
} 
 

 
.container .image_container .image { 
 
    transform: rotate(-45deg); 
 
    margin-top: 10px; 
 
    margin-left: -10px; 
 
}

<div class="container"> 
 
    <div class="image_container"> 
 
    <div class="image"> 
 
     <img src="https://www.w3schools.com/css/img_fjords.jpg" /> 
 
    </div> 
 
    </div> 
 
</div>

을