Snippet Library

• Browse
• Submit A New Snippet
• Create A Package

FIGURES CSS
Type: Sample Code (HOWTO)	Category: Other
License: GNU General Public License	Language: Other Language
Description: Petit code css permettant de réaliser des figures ( carré, triangle, rond, etc)

Versions Of This Snippet:

Snippet ID	Download Version	Date Posted	Author	Delete
16	0.1	2020-12-01 15:48	Emmanuel ROY

Download a raw-text version of this code by clicking on “Download Version”

---

Latest Snippet Version: 0.1

.carre{
    width:200px;
    height:200px;
    background:#069;
}

.rectangle{
    width:20px;
    height:5px;
    background:#069;
}

.cercle {
width: 100px;
height: 100px;
background: #069;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}


.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #069;
}

.diagonale{
    background: -o-linear-gradient(left, white 20%, #8b0 80%);
    //background: -webkit-linear-gradient(45deg,#CEB6FF 50%,#CEB6FF 0%);
    //background: -o-linear-gradient(45deg,#CEB6FF 50%,#CEB6FF 0%);
    //background: -moz-linear-gradient(45deg,#CEB6FF 50%,#CEB6FF 0%);
    //background: linear-gradient(45deg,#CEB6FF 50%,#CEB6FF 0%);
}


.triangle{
    width:1px;
    height:1px;
    border:1px solid #069;
    border-color: transparent #069 transparent transparent;
    border-width:100px;
}

.triangle1 {
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

.ovale{
	width:300px;
	height:200px;
	background:#069;
	-webkit-border-radius:150px / 100px;
	-moz-border-radius:150px / 100px;
	-o-border-radius:150px / 100px;
	border-radius:150px / 100px;
}

		

Add a new version

You can submit a new version of this snippet if you have modified it and you feel it is appropriate to share with others.