Question

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

我正在谈论＆＃34;帖子＆＃34;

右上角的三角形

我知道创建一个triagle的唯一方法是在CSS中使用边框，但由于我需要使用的图像，这不会有帮助。

也许你有其他想法谢谢！

Answer 1

告诉我，如果您需要帮助将其添加到您自己的代码中，请参阅以下示例：

＆＃13;

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%);
}

＆＃13;

<div></div>

＆＃13;

Answer 2

我必须为网站做类似的事情，这是我的榜样。我希望你能用它。

＆＃13;

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

＆＃13;

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

＆＃13;

您必须修改多边形的参数以便随时生成三角形

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>

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

我希望在我的网站上有一个三角形，并用图像填充它

4 个答案: