javascript - 按列表 float 三 Angular 形图片

Question

这是一些代码，但并不完美，所有列表元素都不是静态的，需要按父 block 的高度均匀放置。所以它应该好看。 现在它不是通过父 block 的公共(public)高度放置的，我做了 50 px bttom margin

$('.triangle-list1, .triangle-list2').wrapAll('<div class="triangle-list-top">');
        $('.triangle-list3, .triangle-list4').wrapAll('<div class="triangle-list-middle">');
        $('.triangle-list5, .triangle-list6').wrapAll('<div class="triangle-list-bottom">');

        $('.triangle-list:last').addClass('triangle-list-last');

.tr {
	width: 440px;
	height: 325px;
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	margin: 100px auto 0px;
}
.triangle-list-area {
	position: relative;
	margin-top: -337px;
	height: 450px;
}
.triangle-area {
	background-image: url("../img/circles-tr.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #2b2d33 !important;
}

.tr-area {
	position: relative;
	background-image: url("../img/figure-tr.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.triangle-list {
	font-size: 22px;
	width: 420px;
	position: relative;
}
.triangle-list1, .triangle-list3, .triangle-list5{
	text-align: right;
}
.triangle-list-top {
	margin-bottom: 20px;
  display: flex;
	justify-content: space-between;
}

.triangle-list-middle {
	margin-bottom: 20px;
	/*position: relative;*/
	justify-content: space-between;
	display: flex;
}
.triangle-list-middle .triangle-list {
	width: 360px;
}
.triangle-list-bottom {
	display: flex;
	justify-content: space-between;
}
.triangle-list-bottom .triangle-list {
	width: 275px;
}
.triangle-list-last {
	bottom: 0px;
	text-align: center;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 100% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "tr-area">
    <div class = "tr" style="background: url('https://orig00.deviantart.net/3bd9/f/2010/150/a/4/windows_pica_choo_by_yukamarie18.jpg')"></div>
        <div class = "triangle-list-area">
            <div class = 'triangle-list triangle-list1'>Element 1
            </div>
            <div class = 'triangle-list triangle-list2'>Element 2
            </div>
            <div class = 'triangle-list triangle-list3'>Element 3
            </div>
            <div class = 'triangle-list triangle-list4'>Element 4
            </div>
            <div class = 'triangle-list triangle-list5'>Element 5
            </div>
            <div class = 'triangle-list triangle-list6'>Element 6
            </div>
            <div class = 'triangle-list triangle-list6'>Element 7
            </div>
        </div>
</div>

也许有人知道如何创建三 Angular 形图片并将该图片按列表 float 。

Answer 1

至于三 Angular 形 - 您可以通过在 css 文件中为特定的 img 添加边框使其变得简单。

    div#box {
      border-top: 100px solid transparent;
      border-right: 150px solid transparent;
      border-bottom: 300px solid #111;
      border-left: 150px solid transparent;
      margin: 40px;
      width: 0px;
    }

   <div id="box"></div>

第二个问题的答案:

要制作这样的布局 - 首先你需要制作一个三列网格布局，然后为每个 li 指定单独的位置(或者如果你想使用 div) 方式中的元素是您想要显示它的方式。喜欢:

<div>
  <div class="row__first">
    <ul>...</ul>
  </div>
  <div class="row__second">
    <div class="img__mask-triangle">
      <img>
    </div>
    <span>...</span>
  </div>
  <div class="row__third">
    <ul>...</ul>
  </div>
</div>