CSS各種形狀的div樣式

阿新 • • 發佈：2018-03-15

div bottom AR black center type gray sha osi

<html>
<head>
    <title>shape</title>
    <style type="text/css">
    .parent{
        position:relative;width:100px;height:100px;
    }
    .rect{
        width: 100px;
        height: 100px;
        background: red;
        line-height: 100px;
        text-align: center;
        color 
: white;
    }
    .circle{
      width: 100px;
      height: 100px;
      background: red;
      line-height: 100px;
      text-align: center;
      color: white;
      border-radius: 50%;
    }  
    .ellipse{
      width: 100px;
      height: 50px;
      background: red;
      line-height: 50px;
      text-align 
: center;
      color: white;
      border-radius: 50%;
    }  
    .semi-circle{
      width: 100px;
      height: 50px;
      background: red;
      line-height: 50px;
      text-align: center;
      color: white;
      border-radius: 200px 200px 0 0;
    }  
    .sector{
      width: 100px;
      height: 100px; 

      background: red;
      line-height: 100px;
      text-align: center;
      color: white;
      border-radius: 200px 0 0 0;
    }  
    .arc{
      width: 100px;
      height: 100px;
      background: red;
      line-height: 100px;
      text-align: center;
      color: white;
      border-radius: 100px 0 100px 0;
    }  
    .triangle{
      width: 0px;
      height: 0px;
      border-width: 100px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: green;
      border-left-color: yellow;
      border-right-color: gray;
    }  
    .arrow{
      width: 0px;
      height: 0px;
      border-width: 100px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }  
    .triangle2{
      width: 50px;
      height: 50px;
      border-width: 50px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: green;
      border-left-color: transparent;
      border-right-color: transparent;
    }  
    .triangle3{
      width: 100px;
      height: 100px;
      border-width: 10px;
      border-style: solid;
      border-top-color: black;
      border-bottom-color: green;
      border-left-color: transparent;
      border-right-color: transparent;
      border-radius: 50%;
    }  
    .triangle4{
        width: 50px;
        height: 50px;
        border-width: 10px;
        border-style: solid;
        border-top-color: black;
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: transparent;
        border-radius: 50%;
        clip: rect(0 50px 70px 0);
        left: 0;
        top: 0;
        position: absolute;
    }
    .triangle5{
        width: 100px;
        height: 100px;
        border-top: 10px solid black;
        border-radius: 100px;
    } 
    </style>
</head>
<body>
<!-- square -->
<div class=‘rect‘>正方形</div>
<xmp> 
div{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
}  
</xmp>
<!-- circle -->
<div class=‘circle‘>圓形</div>
<xmp> 
.circle{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
  border-radius: 50%;
}  
</xmp>
<!-- ellipse -->
<div class=‘ellipse‘>橢圓</div>
<xmp> 
.ellipse{
  width: 100px;
  height: 50px;
  background: red;
  line-height: 50px;
  text-align: center;
  color: white;
  border-radius: 50%;
}  
</xmp>
<!-- semi circle -->
<div class=‘semi-circle‘>半圓</div>
<xmp> 
.semi-circle{
  width: 100px;
  height: 50px;
  background: red;
  line-height: 50px;
  text-align: center;
  color: white;
  border-radius: 100px 100px 0 0;
}  
</xmp>
<!-- sector -->
<div class=‘sector‘>扇形</div>
<xmp> 
.sector{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
  border-radius: 200px 0 0 0;
}  
</xmp>
<!-- arc -->
<div class=‘arc‘>弧形</div>
<xmp> 
.arc{
  width: 100px;
  height: 100px;
  background: red;
  line-height: 100px;
  text-align: center;
  color: white;
  border-radius: 100px 0;
}  
</xmp>
<!-- triangle -->
<div class=‘triangle‘>三角形</div>
<xmp> 
.triangle{
  width: 0px;
  height: 0px;
  border-width: 100px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: green;
  border-left-color: yellow;
  border-right-color: gray;
}  
</xmp>
<!-- arrow -->
<div class=‘arrow‘>三角形</div>
<xmp> 
.arrow{
  width: 0px;
  height: 0px;
  border-width: 100px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}  
</xmp>
<div class=‘triangle2‘></div>
<xmp> 
.triangle2{
  width: 50px;
  height: 50px;
  border-width: 50px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: green;
  border-left-color: transparent;
  border-right-color: transparent;
}  
</xmp>
<div class=‘triangle3‘></div>
<xmp> 
.triangle3{
  width: 50px;
  height: 50px;
  border-width: 50px;
  border-style: solid;
  border-top-color: black;
  border-bottom-color: green;
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
}  
</xmp>
<div class="parent">
    <div class=‘triangle4‘></div>
</div>
<xmp> 
.triangle4{
    width: 50px;
    height: 50px;
    border-width: 10px;
    border-style: solid;
    border-top-color: black;
    border-bottom-color: green;
    border-left-color: red;
    border-right-color: transparent;
    border-radius: 50%;
    clip: rect(0 50px 70px 0);
    left: 0;
    top: 0;
    position: absolute;
}  
</xmp>

<div class=‘triangle5‘></div>
<xmp> 
.triangle5{
    width: 100px;
    height: 100px;
    border-top: 10px solid black;
    border-radius: 100px;
}  
</xmp>
    

</body>
</html>

CSS各種形狀的div樣式

div bottom AR black center type gray sha osi <html> <head> <title>shape</title> <style type="text/css

如何用 CSS 繪制各種形狀

cli .cn 繪制 ins pause http 部分 mixin 圓角自適應的橢圓 1.自適應的橢圓實現方式是通過border-radius這個屬性；border-radius它可以單獨指定水平和垂直半徑。用 / 分隔這兩個值。並且該屬性的值不僅可以接受長度值，

css實現梯形（各種形狀）的網頁布局——transform的妙用

建議 logs 網頁布局 mar 500px 實現 hidden .html order 　　　　在各式各樣的網頁中，經常會看到形狀特別的布局，比如說下面的這種排版方式：　　這種視覺上的效果，體驗十分好。那麽他是如何來實現的呢

CSS製作各種形狀(矩形、圓形、三角形、多邊形、五角星星、太極陰陽圖......)

CSS能夠製作各種形狀。正方形和矩形很容易，因為它們是自然形狀。新增寬度和高度，就可以獲得所需的確切尺寸矩形。新增border-radius，就可以將這些矩形變成圓形和橢圓形。我們還可以利用CSS中的::before和::after元素，新增到原始元素的形狀，再通過巧妙地定位

css實現各種形狀的練習

前言：最近發現好多基礎都忘記了，又開始在fcc上進行練習了，順便把css實現各種形狀練習一遍。最為基礎的矩形、正方形和圓形就不細寫了，瞭解一點css基本都能寫出來。接下來進入正題。先設定基礎的div

html網頁什麼樣的字型最好看，css設定各種中文字型樣式程式碼

css程式碼如下: { font-family:"Microsoft YaHei",微軟雅黑,"MicrosoftJhengHei",華文細黑,STHeiti,MingLiu } 加上中文名“微軟

CSS如何實現div寬度根據內容自適應

應用錯誤 clas ftw strong 有效不能 why 如何 CSS如何實現div寬度根據內容自適應:建議:盡可能的手寫代碼，可以有效的提高學習效率和深度。在實際應用中，可能有這樣的需求，那就是需要div根據內容進行寬度自適應。有很多開發者可能誤以為如果不設定div

JS+CSS簡單實現DIV遮罩層顯示隱藏【轉藏】

button left dtd -m javascrip htm width dex absolute <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

CSS 各種定位（position）方式的區別

spa html posit 空間不顯示保留 clas 絕對定位不可見 static：靜態定位是position的默認值，元素框正常生成，也就是沒有定位時的正常顯示。 relative：相對定位　　用法一：元素相對自身的原位置偏移某個距離，但是原本

css（層疊樣式表）（1課時）

繼承 http 效果樣式表圖片地址不清楚內嵌設置 class選擇器 1、css全稱為疊層樣式表，在HTML中有4種引入方式 a、行內樣式<dic style="color:red"></div> b、內嵌式：在<head>

SVG基本形狀及樣式設置

中心線畫筆塗色 arr script 允許忽略 doc 利用前面的話　　圖形分為位圖和矢量圖。位圖是基於顏色的描述，是由像素點組成的圖像；而矢量圖是基於數學矢量的描述，是由幾何圖元組成的圖像，與分辨率無關。可縮放矢量圖形，即SVG，是W3C XML的分支語言之一

css各種布局

div ie6 nbsp cell 定位依賴 splay vertica ble 1、水平居中前提：父容器.parent 和子容器.child 1)使用text-align和inline-block .parent{text-aling:center}; .child

css設置文字樣式的方法

pac -i 樣式 mil ora family letter center tom 1.text-align (center,left,right) 水平對齊方式 2.line-height 2px; 行距高度； 3.text-decoration(none,u

css中background合寫樣式

color chm ffffff rep position osi style over bsp body { 　　background: url("img_tree.png") no-repeat fixed 50% 50%/cover #ffffff ; }等價於 bo

css各種練習

-a osi die ext posit 9.png gradient 2017年 near 2017年10月22日 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

CSS設置DIV背景色漸變顯示--針對不同瀏覽器，背景漸變的兼容問問題

fff 兼容火狐 kit 瀏覽器 bsp 谷歌 safari 背景色漸變針對不同瀏覽器，背景漸變的兼容問問題！ background: -ms-linear-gradient(top, #fff, #0000ff); /* IE 10 */ backgr

css修改滾動條樣式

track 滾動 absolute pos erb body auto back trac <div class="inner"> <div class="innerbox"> <p style="height:20

css基礎 float div具有行內塊元素的特性

視頻 char 讀書 cas 圖片 author css基礎 meta lock 禮悟：　　公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。　　

css關於控制div靠左或靠右的排版布局

posit post val stat str end ron log bsp 關於控制div靠左或靠右的排版布局,我整理三種平時用到的css屬性小知識（元素模塊靠左或靠右排版）： 1、float屬性（float 屬性定義元素在哪個方向浮動）　　值：left（元素向左浮動

畢設筆記1----div樣式

lips 換行 spa otto div 溢出 -s gpo 實現 div顯示在頁面底端 bottom：0；文字超出部分的處理首先設置div的width和height overflow: hiddenoverflow 屬性規定當內容溢出元素框時發生的事情。這個屬性定義溢

CSS各種形狀的div樣式

相關推薦