50 lines
1 KiB
HTML
50 lines
1 KiB
HTML
<!doctype html>
|
|
<style>
|
|
.test {
|
|
width: 200px;
|
|
height: 100px;
|
|
margin-left: 90px;
|
|
border: solid 10px blue;
|
|
}
|
|
|
|
.spacer {
|
|
float: left;
|
|
width: 90px;
|
|
height: 120px;
|
|
background-color: blue;
|
|
}
|
|
|
|
.outer {
|
|
width: 200px;
|
|
height: 100px;
|
|
margin-left: 90px;
|
|
padding: 10px;
|
|
background-color: blue;
|
|
}
|
|
|
|
#gradient1 {
|
|
width: 200px;
|
|
height: 100px;
|
|
background-image: linear-gradient(to right top, black 49%, white 50%);
|
|
}
|
|
|
|
#gradient2 {
|
|
background-image: linear-gradient(to right top, black 49%, white 50%);
|
|
}
|
|
|
|
#gradient3 {
|
|
background-image: radial-gradient(ellipse at 30% 30%, black 49%, white 50%);
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<div class="spacer"></div>
|
|
<div class="outer">
|
|
<div id="gradient1"></div>
|
|
</div>
|
|
</div>
|
|
<div id="gradient2" class="test"></div>
|
|
<div>
|
|
<div class="spacer"></div>
|
|
<div id="gradient3" class="test"></div>
|
|
</div>
|