主页 / 问题 / 868883
Accepted
Даша Новикова
Asked:2020-08-15 16:58:31 +0000 UTC2020-08-15 16:58:31 +0000 UTC

如何在布局中正确显示三角形？[关闭]

  • 772

大家好）问题出现了，如何在布局页面时正确显示三角形（在下角的照片中）：使用图像定位，还是使用 CSS 属性绘制？

在此处输入图像描述

html

2 个回答

  1. Best Answer

    只要容器的宽度始终小于高度，就可以在伪元素中使用渐变。自适应地工作。

    .container {
  display: flex;
  min-height: 100vh;
}

.intro {
  flex: 2;
}

.right {
  flex: 1;
  background: #f2f2f2;
  position: relative;
}

.right:before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 100%;
  background: linear-gradient(135deg, transparent, transparent 50%, pink 50%, pink);
}
    <div class="container">
  <div class="intro"></div>
  <div class="right"></div>
</div>

    • 2

  2. 它可能看起来像一根拐杖，但这是我唯一想到的

    function angle(width, height)
{
  return Math.atan(height/width)*(180/Math.PI);
}
//alert (angle(400,200))
document.getElementsByClassName("triangle")[0].style.background = "linear-gradient("+-45+angle(400, 200)+"deg, transparent 50%, #ff9999 0)"
    .triangle-wrapper {
  width:400px;
  height:500px;
  background: #eee;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.triangle-wrapper .triangle {
  width:100%;
  height:200px;
  
}
    <div class="triangle-wrapper">
  <div class="triangle" ></div>
</div>

    • 0

相关问题