css實現簡單幾何圖形

時間 2019-12-14

標籤 css 實現簡單幾何圖形欄目 CSS 简体版

原文原文鏈接

前言：你知道嗎？用代碼就能夠作出三角形、圓形、扇形等等這些幾何圖形呦。快過來一探究竟吧！css

頁面上一些簡單的圖形，如三角形、圓形等等，除了用圖片來實現，咱們還能夠用css的border屬性來實現，不只減小了內存佔用，對圖形的操做也更靈活。spa

接下來咱們就一步一步的來講一下怎麼實現這些幾何圖形。3d

話很少說，這就開始吧。code

目錄：blog

　　1、梯形圖片

　　2、三角形內存

　　3、圓形class

　　4、橢圓原理

　　5、圓柱形im

　　6、扇形

　　7、半圓

　　8、綵帶

1、梯形

咱們都知道，用border能夠設置盒子的邊框，包括上下左右邊框，好比下面這個：

<style>
       .box {width:100px; height:100px;border:10px solid #a10;}
</style>
<body>
    <div class="box"></div>
</body>

這樣實現的效果就沒必要多說了吧，就是下面這樣：

　　接下來咱們給每一個邊框都設置不一樣的顏色與：

.box {width:100px; height:100px;
border-top:60px solid blue;border-right:60px solid yellow;
border-bottom:60px solid green;border-left:60px solid pink;}

我給這個盒子的四個邊框分別設置了不一樣的顏色，來看一下效果：

　　如今能夠看出來，每一個邊框就是一個梯形的形狀，那咱們怎麼只讓他顯示一個梯形呢？

咱們設置邊框的寬度是50px，盒子寬高都是100px，如今盒子的中心是有一個正方形的空白的，咱們要獲得梯形，首先要把這個空白去掉，怎麼去呢，好比說咱們要獲得底部的梯形，那就要把盒子的高度設爲0，這就把中間的空白去掉了，而後咱們再去掉頂部的線條，把其他線條的顏色設置爲透明色，這樣就獲得了一個梯形。具體代碼以下：

.box {width:100px; height:0;border-right:60px solid transparent;
border-bottom:60px solid green;border-left:60px solid transparent;}

效果以下：

想獲得左邊的梯形，就把盒子的寬度設置爲0，去掉右邊的線條，其他線條的顏色設置爲透明色：

.box {width:0; height:100px;border-top:60px solid transparent;
border-bottom:60px solid transparent;border-left:60px solid red;}

可能大家會問，爲何要把寬度或者高度設置爲0，如今咱們就拿紅色這個梯形來舉例子，咱們用審查元素先來看一下這個梯形：

接下來咱們把盒子的寬度設置爲100px，再來看看審查元素：

看出差異了嗎？寬度爲0時，梯形所佔的位置僅僅是梯形自己的寬度，而寬度設置爲100px時，梯形的實際佔位多了100像素值。咱們將寬度設置爲0，是爲了減小沒必要要的佔位。

咱們還能夠經過修改邊框的寬度來獲得不一樣大小的梯形，這裏就不一一寫了。

2、三角形

梯形和三角形的原理是同樣的，只不過是把盒子的寬高都設置爲0，代碼以下：

.box {width:0; height:0;border-top:60px solid blue;border-right:60px solid yellow;
border-bottom:60px solid green;border-left:60px solid red;}

看一下效果：

要獲得底部的三角形，要這麼寫：

.box {width:0; height:0;border-right:60px solid transparent;
border-bottom:60px solid green;border-left:60px solid transparent;}

三個邊框設置的粗細都是同樣的，這樣咱們獲得的是一個直角三角形，若是要獲得不一樣形狀的三角形，只須要改變邊框的粗細就能夠了。

3、圓形

圓形咱們就要用到 border-radius 圓角邊框，下面是代碼：

.box {width:100px; height:100px;background-color: green;border-radius:50px;}

4、橢圓

.box {width:100px; height:50px;background-color: green;border-radius:50px/25px;}

5、圓柱形

.box {width:100px; height:100px;background-color: green;border-radius:50px/25px;}

6、扇形

.box {width:100px;height:100px;background-color: green;border-top-left-radius: 100%;}

7、半圓

.box {width:100px;height:50px;background-color: green;border-radius:50px 50px 0 0;}

8、綵帶

.box {width:0;height:100px;border-right:50px solid green;
border-bottom:30px solid transparent;border-left:50px solid green;}

除了以上這些，還有不少圖形能夠實現，有興趣的朋友能夠多多嘗試。

歡迎留言~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。