Skip to content

Instantly share code, notes, and snippets.

@Voloshin-Sergei

Voloshin-Sergei/css

Created July 18, 2020 19:13
Show Gist options
  • Save Voloshin-Sergei/a0a1ad94dfe50ff2b246c6dc5fbf5cb3 to your computer and use it in GitHub Desktop.
Save Voloshin-Sergei/a0a1ad94dfe50ff2b246c6dc5fbf5cb3 to your computer and use it in GitHub Desktop.
Download ZIP
square with round corners
Raw
css
*{padding:0;margin:0;border:0;}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
:focus,:active{outline:none;}
a:focus,a:active{outline:none;}
nav,footer,header,aside{display:block;}
html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display:none;}
button{cursor:pointer;}
button::-moz-focus-inner{padding:0;border:0;}
a,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul li{list-style:none;}
img{vertical-align:top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;}
/*--------------------*/
.mine__block {
width: 400px;
height: 400px;
margin:100px auto;
position: relative;
border: 1px solid rgba(0,0,0,.0);
}
.box_rect {
width: 300px;
height: 300px;
margin:50px;
border: 1px solid #000;
z-index: 1;
}
.box__circle1 {
width: 100px;
height: 100px;
position: absolute;
top:0;
left: 0;
border: 1px solid #000;
border-radius: 50%;
background-color: #fff;
z-index: 10;
}
.box__circle2 {
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 0;
border: 1px solid #000;
border-radius: 50%;
background-color: #fff;
z-index: 10;
}
.box__circle3 {
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
right: 0;
border: 1px solid #000;
border-radius: 50%;
background-color: #fff;
z-index: 10;
}
.box__circle4 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
right: 0;
border: 1px solid #000;
border-radius: 50%;
background-color: #fff;
z-index: 10;
}
.box__rect-rect1 {
width: 400px;
height: 49px;
position: absolute;
top:0;
left: 0;
background-color: #fff;
z-index: 12;
}
.box__rect-rect2 {
width: 49px;
height: 400px;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
z-index: 12;
}
.box__rect-rect3 {
width: 49px;
height: 400px;
position: absolute;
top: 0;
left: 351px;
background-color: #fff;
z-index: 12;
}
.box__rect-rect4 {
width: 400px;
height: 49px;
position: absolute;
top:351px;
left: 0;
background-color: #fff;
z-index: 12;
}
Raw
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=devise-width, inital-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<div class="mine__block">
<div class="box_rect">
<div class="text">
<p>Квадрат</p>
<p></p>
<p></p>
</div>
</div>
<div class="box__circle1"></div>
<div class="box__circle2"></div>
<div class="box__circle3"></div>
<div class="box__circle4"></div>
<div class="box__rect-rect1"></div>
<div class="box__rect-rect2"></div>
<div class="box__rect-rect3"></div>
<div class="box__rect-rect4"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment