Question

我正在尝试为一个朋友创建一个投资组合-请求之一是他有一个初始屏幕图像，该图像的对角线框穿过图像-这是id然后放置一些文本的地方。我创建了我要说的内容的摘要，但是我不知道如何编码，因为我使用的是HTML CSS和JS，所以我可以做任何事情。

<!--HTML-->
<div class="name">
        <div class="transbox1">
    <img src="Assets/Background.png" class="bg1 color_overlay">
            <h1>John</h1>
            <h2>Doe</h2>
        </div>


/*CSS*/
    .bg1 {
    position: absolute;
    z-index: -2;
    width: 100%;
    overflow: hidden;
    margin-left: -5% !important;
    -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 70%, 0 70%);
    clip-path: polygon(0 10%, 100% 10%, 100% 70%, 0 70%);   
    opacity: 1 !important;
}

.transbox1 {
    background-color: black;
    color: white;
    opacity: 1;

}

The Mock-up

Answer 1

您可以尝试这样的事情

window.onload = function() {

var image = document.getElementsByClassName('image')[0];
var width = image.offsetWidth;
var height = image.offsetHeight;

var triangle = document.getElementsByClassName('triangle')[0];
triangle.style.borderStyle = 'solid';
triangle.style.borderWidth = '0 0 ' + height + 'px ' + width + 'px';
triangle.style.borderColor = 'transparent transparent #007bff transparent';

}

.container {
position: absolute;
top:0px;
left:0px;
width:100%;
height:200px;
}

.image { 
position: absolute;
top:0px;
left:0px;
width:100%;
height:100%;
}


.triangle {
position: absolute;
top:0px;
left:0px;
height:0px;
width:0px;
display:inline-block;
}

.title {
 position:absolute;
 bottom:10px;
 right:10px;
 font-size:34px;
 font-family:helvetica;
}

<div class="container">

    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Polarlicht_2.jpg/2560px-Polarlicht_2.jpg" class="image">

    <div class="triangle"></div>
    
    <div class="title">FName <br> LName</div>

</div>

Answer 2

我在容器中添加了position:relative并清理了您的标记，一切正常：

/*CSS*/

.name {
  position: relative;
}

.bg1 {
  position: absolute;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 100%, 100% 0%, 100% 100%);
  background-color: red;
  opacity: .5;
}

.transbox1 {
  background-color: black;
  color: white;
  opacity: 1;
}

<!--HTML-->
<div class="name">
  <div class="transbox1">
    <img src="Assets/Background.png" class="bg1 color_overlay">
    <h1>John</h1>
    <h2>Doe</h2>
  </div>
</div>

在HTML图像的顶部添加倾斜的叠加层

2 个答案: