divの画面の角に4つの直角三角形を作るために境界線を使用しました。これは私がこれを作るのに使ったリンクです。 http://www.howtocreate.co.uk/tutorials/css/slopesdivの尺度をどのように調整するのですか？
どのようにしてこの枠線をウィンドウのサイズに基づいて拡大縮小できますか？たとえば、各三角形がブラウザの幅の33％と高さの25％を占めるようにします。
CSSまたはjQueryで解決策がある場合は好きです。
これは、HTMLとCSSの簡略化されたバージョンへのリンクです。三角形を収縮させて（私のサイトでは、三角形は350pxで250pxなので、ウィンドウのサイズを変更すると縮尺を下げる必要があります）。あなたが使用することができhttps://jsfiddle.net/9L5fkohr/enter code here
：
#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
ALOS私はを追加しました本体からデフォルトのマージンを削除するには、を参照してください。
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>ありがとう、これは働いた。私はvhとvwについて知らなかった。私が前にこれを知っていれば、多くの助けとなりましたか？ –
三角形の比率を維持する方法はありますか？サイズは250pxと350pxですが、ブラウザのサイズを変更する方法に関係なく、三角形の比率を維持できますか？ –
@ harsh.gupta all 25vh 33vhまたは25vw 33vw –
これらの幅と高さを与えますあなたのdivコンテナ – Saksham
何？わかりません。 –
最初にあなたのhtmlを投稿してください – Saksham