Comment couper un coin avec CSS lorsque l'image de fond est nécessaire?

Question

image of what it should look like

Hé les gars, ce qui précède est une image d'un projet sur lequel je travaille. C'est de savoir jusqu'où je suis arrivé:

image of what it looks like now

création de la boîte était assez simple; Cependant, maintenant je n'ai aucune idée comment créer ce coin coupé en bas à gauche. J'ai déjà essayé un tas de choses et la plupart des choses fonctionnent si le fond n'est pas transparent mais un bloc de couleur. Comme l'arrière-plan doit être cette image, je ne peux pas faire fonctionner le coin coupé sans avoir un côté montrer une certaine couleur. Ceci est mon code:

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

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

J'ai essayé plusieurs choses déjà, comme celui-ci ici (pas le code exact je, mais je l'ai suivi cet exemple):

.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; 
} 

Cela crée une coupe coin, mais avec un bloc d'une couleur unie et j'ai besoin de l'image à montrer, pas la couleur.

Est-ce que quelqu'un a une idée de comment faire cela? Les suggestions sont très appréciées. Merci!

Answer 1

Vous pouvez utiliser avant/après élément pour faire la partie inférieure comme ceci:

.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>

le fond est divisé en une partie de remorquage: un rectangle avec seulement deux frontière + un carré une bordure en rotation avec 45 °

it helps

NB: Becarefull lors du changement de faible 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

Je pense que vous essayez de couper le coin d'une image au lieu de div, de sorte que vous pouvez faire quelque chose comme ceci:

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>