Question

我使用边框在div的屏幕角上制作了4个直角三角形。这是我用来做这个的链接。 http://www.howtocreate.co.uk/tutorials/css/slopes

如何根据窗口大小缩放此边框？例如，我希望每个三角形占据浏览器宽度的33％和高度的25％。

如果CSS或jQuery中有解决方案，则会更喜欢。

这是我的HTML和CSS的简化版本的链接。我缩小了三角形以使它们合适（在我的网站上，三角形是350px乘250px，因此在调整窗口大小时需要按比例缩小）。 https://jsfiddle.net/9L5fkohr/ enter code here

Answer 1

您可以使用：

#topLeftTriangle {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 25vh solid #ceecec;
  border-right: 33vw solid transparent;
  float: left;
}

25vh =屏幕高度

33vw =屏幕宽度

参考：https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Alos我添加body { margin: 0; }以从正文中移除默认边距。

＆＃13;

body {
  margin: 0;
}

#wrapper {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}

#topRow {
  width: 100%;
}

.topRowElement {
  display: inline;
  float: left;
  width: 33.33%;
}

#topLeftTriangle {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 25vh solid #ceecec;
  border-right: 33vw solid transparent;
  float: left;
}

#title {
  text-align: center;
}

#topRightTriangle {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-top: 25vh solid #ceecec;
  border-left: 33vw solid transparent;
  float: right;
}

.portalC {
  display: inline;
  float: left;
  width: 50%;
}

.portal {
  text-align: center;
}

.botRowElement {
  display: inline;
  width: 33.33%;
}

#botRow {
  position: fixed;
  bottom: 0px;
  width: 100%;
}

#botLeftTriangleC {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-bottom: 25vh solid #ceecec;
  border-right: 33vw solid transparent;
  float: left;
}

#botRightTriangleC {
  font-size: 0px;
  line-height: 0%;
  width: 0px;
  border-bottom: 25vh solid #ceecec;
  border-left: 33vw solid transparent;
  float: right;
}

＆＃13;

<body>
  <div id="wrapper">
    <div id="topRow">
      <div class="triangleC topRowElement" id="topLeftTriangleC">
        <div class="triangle" id="topLeftTriangle">
          triangle
        </div>
      </div>
      <div class="topRowElement" id="titleC">
        <div id="title">
          Title
        </div>
      </div>
      <div class="triangleC topRowElement" id="topRightTriangleC">
        <div class="triangle" id="topRightTriangle">
          triangle
        </div>
      </div>
    </div>
    <div id="main">
      <div id="portalMenu">
        <div class="portalC" id="docPortalC">
          <div class="portal" id="docPortal">
            Head1
          </div>
        </div>
        <div class="portalC" id="pharmaPortalC">
          <div class="portal" id="pharmaPortal">
            Head2
          </div>
        </div>
      </div>
    </div>
    <div id="botRow">
      <div class="triangleC botRowElement" id="botLeftTriangleC">
        <div class="triangle" id="botLeftTriangle">
          triangle
        </div>
      </div>
      <div class="triangleC botRowElement" id="botRightTriangleC">
        <div class="triangle" id="botRightTriangle">
          triangle
        </div>
      </div>
    </div>
  </div>
</body>

＆＃13;

如何在div上缩放边框？

1 个答案: