技術提供:Blogger.

創意網頁設計,響應式網頁,部落格版型,資料庫,購物車,Bootstrap,RWD,html,css,php,jquery,MySQL,專營綠茶,紅茶,高山凍頂烏龍,阿里山杉林溪梨山大禹嶺茶及茶葉罐杯壺禮盒批發零售,兼營艋舺快遞,汽機車外送,中央果菜市場,環南市場,迪化街等地代購採買及各項代理服務! 孟甲服務專線:0952-916626
E-mail:roberchen3@gmail.com


用CSS畫矩形、圆形、半圆形、扇形、疑問框、弧形、多邊形、小三角形


<div >矩形</div>

<div  class="circle" >圆形</div>

<div  class="semi-circle" ><p style="position:absolute;margin-top:-20px;margin-left:30px;">半圆</p></div>

<div  class="sector" >扇形</div>

<div  class="rectangle" >疑问框</div>

<div  class="arc" ><p style="position:absolute;margin-top:0px;margin-left:30px;font-weight:bold;-webkit-transform: rotate(-40deg);">弧形</p></div>

<div  class="triangle" ><p style="position:absolute;margin-top:-50px;margin-left:-25px;color:red;font-weight:bold;">多邊形</p></div>

<div  class="arrow" ><p style="position:absolute;margin-top:-85px;margin-left:-22px;color:#fff;font-size:14px;">三角形</p></div>


<style>
 div {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 15px;
    background-color: red;
}
.circle {
    border-radius: 50%;
}

.semi-circle {
    border-radius: 100px 100px 0 0;
    height: 50px;
}

.sector {
    border-radius: 100px 0 0;
}
 .arc{
        border-radius: 100px 0;
       -webkit-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }


/*圆角矩形*/
   .rectangle{
        width: 200px;
        border-radius: 15px;
        position: relative;
    }
    /*小三角*/
   .rectangle::before{
        content: "";
        width: 0;
        height: 0;
        border: 15px solid red;
        border-color: red transparent transparent transparent;
        position:absolute;
        bottom: -30px;
        left: 40px;
    }

.triangle{
        border: 50px solid green;
        width: 0;
        height: 0;
        border-top-color: yellow;
        border-right-color: blue;
        border-bottom-color: pink;
        border-left-color: orange;
    }
   .arrow{
        background: none;   /*为了清除前面div设置的背景颜色*/
        border: 50px solid red;
        width: 0;
        height: 0;
        border-color: red transparent transparent transparent;
    }
</style>

~歡迎轉載,但請註明來源網站名稱和網址,文章若有侵權,請來信告知,我們會盡快處理~

響應式網頁架站只要6,888元起|[RWD]響應式網站,自適應網頁,讓SEO搜尋引擎最佳化你的網站

"你是獵人還是獵物?"

Related Posts Plugin for WordPress, Blogger...

0 comments :

張貼留言

1.猛甲茶道,歡迎多留言,可以幫自己網站打廣告~
2.需要 猛甲茶道 回覆,請勿使用匿名留言[可使用名稱/網址,名稱填自己名字,若無網址,請填E-mail]。
3.匿名攻訐、不相干之廣告適用於無條件刪去法,望請海涵:)
4.您可以使用一些 HTML 標記,如:
 <b>粗體</b>, <i>斜體</i>, <a href='網址'>描述文字</a>