如何在div上缩放边框？

-1

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

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

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

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

来源

2017-06-03 harsh.gupta

给这些宽度和高度，你的DIV容器 – Saksham

什么？我不明白。 –

请先将您的html发布到 – Saksham

你可以使用：

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

25vh =屏幕高度

33vw =屏幕宽度

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

阿洛斯我加body { margin: 0; }删除身体的默认边距。

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

<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>

来源

2017-06-03 20:47:27

谢谢，这工作。我不知道vh和vw。如果我以前知道这件事，会有很多帮助。 –

有什么办法可以保持三角形的比例？可以说尺寸是250像素和350像素，我可以保持三角形的比例，无论浏览器如何调整大小？ –

@ harsh.gupta全部使用25vh 33vh或25vw 33vw –

如何在div上缩放边框？

回答

相关问题