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

Question

我正在设计一个用于练习的小网页（我是个初学者），正如标题所述，我需要创建一个带有背景图像的三角形。 我创建了这个模型： 我的网站

我说的是“柱子”右上角的三角形

我知道创建triagle的唯一方法是在CSS中使用边框，但是由于需要使用图像，因此这无济于事。

也许您还有其他想法，谢谢！

Answer 1

告诉我，如果您需要帮助将其输入自己的代码中，请参见以下示例：

 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

我必须为网站做类似的事情，这是我的例子。 希望您可以使用它。

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

无论如何，您都必须修改多边形的参数以使三角形成为可能

Answer 3

另外一个选项：

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

只是将矩形与背景图像按三角形重叠