我想在我的网络中放置一个三角形并用图像填充它

Question

I'm designing a little web page, just for practicing(I'm a begginer), and as the title says, I need to create a triangle with a background image. I have this model that I created : My website

I'm talking about the triangles on the up-right corner of the "posts"

The only way I know of creating a triagle is with borders in CSS, but that won't help because of the image I need to use.

Maybe you have other idea Thanks !

Answer 1

Tell me if you need help getting this in to your own code, here's the example:

 div { position: absolute; width: 128px; height: 128px; background-image: url(http://i.imgur.com/envk4PP.png); background-repeat: no-repeat; background-size: cover; -webkit-clip-path: polygon(0 12%, 0 86%, 35% 50%); clip-path: polygon(0 0%, 100% 100%, 100% 0%); } 

 <div></div> 

Answer 2

I have to do something similar for a website, this is my example. I hope you can use it.

 .overheader{ padding: 40px 0; -webkit-clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%); -moz-clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%); clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%); background-image: url('http://www.todofermentacion.cl/assets/img/cerveza.png'); } .page-header { padding: 50px; } 

 <div class="page-header"> <div class="overheader"> </div> </div> 

You have to modify the parameters of polygon to make the triangle anyway you want

Answer 3

Another option:

 .post { /* not important */ margin: 100px; width: 10rem; height: 5rem; border: solid 1px black; background: ivory; padding: 1rem; /* important */ position: relative; overflow: hidden; } .post:after { position: absolute; display: block; content: " "; background-image: url(https://www.gravatar.com/avatar/614f3577183f1a9219884f73ec2538fd); transform: rotate(45deg); width: 50px; height: 50px; /* move it half the width*/ top: -25px; right: -25px; } 

 <div class="post"> Here is my post </div> 

Answer 4

 :root{ --imageblockwidth: 105px; --imageblockheight: 80px; /*css variables*/ } .imagediv { width: var(--imageblockwidth); height: var(--imageblockheight); background-image: url(https://i.ytimg.com/vi/2fb-g_V-UT4/hqdefault.jpg); background-size: contain; background-repeat: no-repeat; } .imageoverlapper { width: var(--imageblockwidth); height: var(--imageblockheight); box-sizing: border-box; /*triangles using borders*/ border-top: var(--imageblockheight) solid rgba(0,0,0,0); border-left: var(--imageblockwidth) solid yellow; position: relative; top : calc(-1*var(--imageblockheight)); } 

 <div class="imagediv"></div> <div class="imageoverlapper"></div> 

Just overlap rectangle with background image by triangle