pvitkovsky
2/26/2019 - 8:22 PM

vietnam Vietnam Flag by professor // source https://jsbin.com/yimiciy

vietnam

Vietnam Flag by professor

// source https://jsbin.com/yimiciy

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Vietnam Flag by professor">
    <meta charset="UTF-8">
    <title>vietnam</title>
    <link rel="stylesheet" href="vietnamflag.css">
<style id="jsbin-css">
@import "../../Common/common.css";
 
body {background-color: red}
.container{
    width: 364px; height: 308px;
}
.triangle1{
    position:absolute;
    width:0; height: 0;
    left: 62px;
 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 308px solid yellow;
}
 
.triangle2{
    position:absolute;
    width:0; height: 0;
    left: 36px; bottom: 872px;
 
    border-left: 132px solid transparent;
    border-right: 132px solid transparent;
    border-bottom: 100px solid red;
}
 
.triangle3{
position:absolute;
width:0; height: 0;
bottom: 973px;
 
border-left: 162px solid transparent;
border-right: 162px solid transparent;
border-top: 118px solid yellow;
}
</style>
</head>
<body>
    <div class="centered container">
        <div class="triangle1"></div>
        <div class="triangle2"></div>
        <div class="triangle3"></div>
    </div>


<script id="jsbin-source-css" type="text/css">@import "../../Common/common.css";
 
body {background-color: red}
.container{
    width: 364px; height: 308px;
}
.triangle1{
    position:absolute;
    width:0; height: 0;
    left: 62px;
 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 308px solid yellow;
}
 
.triangle2{
    position:absolute;
    width:0; height: 0;
    left: 36px; bottom: 872px;
 
    border-left: 132px solid transparent;
    border-right: 132px solid transparent;
    border-bottom: 100px solid red;
}
 
.triangle3{
position:absolute;
width:0; height: 0;
bottom: 973px;
 
border-left: 162px solid transparent;
border-right: 162px solid transparent;
border-top: 118px solid yellow;
}</script>
</body>
</html>
jsbin.yimiciy.css
content_copyfile_download
@import "../../Common/common.css";
 
body {background-color: red}
.container{
    width: 364px; height: 308px;
}
.triangle1{
    position:absolute;
    width:0; height: 0;
    left: 62px;
 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 308px solid yellow;
}
 
.triangle2{
    position:absolute;
    width:0; height: 0;
    left: 36px; bottom: 872px;
 
    border-left: 132px solid transparent;
    border-right: 132px solid transparent;
    border-bottom: 100px solid red;
}
 
.triangle3{
position:absolute;
width:0; height: 0;
bottom: 973px;
 
border-left: 162px solid transparent;
border-right: 162px solid transparent;
border-top: 118px solid yellow;
}