Baca Juga :  Menetapkan Border Yang Berbeda di Setiap Sisi

Bentuk Geometris CSS

0 145

Mengikuti gaya CSS akan berguna saat Anda ingin menggambar bentuk geometris dengan CSS tanpa menggunakan gambar. Kebanyakan dari mereka dilakukan dengan menggunakan CSS3 dan jadi periksalah apakah browser Anda mendukungnya.

Circle

.circle { 
   width: 100px;
   height: 100px;
   background: #07CAF3; 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
}

Oval

.oval {
	height: 200px;
	width: 100px;
	background: #07CAF3;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
Baca Juga :  Semua Properti Border Atas Dalam Satu Deklarasi

Triangle

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

Triangle Sided

.triangle-sided {
	height: 0;
	width: 0;
	border-top: 100px solid #07CAF3;
	border-right: 100px solid transparent;
}

Rectangle

.rectangle {
   height: 100px;
   width: 200px; 
   background: #07CAF3;
}

Parallelogram

.parallelogram {
   height: 75px;
   width: 150px; 
   background: #07CAF3;
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

Trapezoid

.trapezoid {
	height: 0;
	width: 100px;
	border-bottom: 100px solid #07CAF3;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
}

Cone

.cone {
  height: 0;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid #07CAF3;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

Ini semua bentuk geometris primitif. Kamu bisa menggabungkan ini dan menciptakan bentuk yang lebih kompleks seperti pentagon, hexagon dan lainnya.

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.