2. 程式人生 > >微信小程式樣式三角形搭建

微信小程式樣式三角形搭建

阿新 • • 發佈：2019-02-17

直接上程式碼：

.pledgecont::before { content: ''; width: 0; height: 0; border-bottom: 14px solid #fff; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; top: -14px; left: 37.5%;}

看出來了嗎？這裡構造了一個三角形，真的很神奇。

一個長和寬都為0的容器，設定border的四個邊就可以實現不同的三角形，挺佩服css樣式的。

以上例子中配置border-bottom有顏色，其餘的都是transparent，因此這是一個正三角形。

其實神奇的事情還多，看到除了三角形外，很多形狀都可以，因此也摘抄過來了，神奇的css。

如下：

1、圓形

image

CSS程式碼如下：寬高一樣，border-radius設為寬高的一半

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

2、橢圓

image

CSS程式碼如下：border-radius:水平半徑/垂直半徑

#oval {
    width: 200px;
    height
 
: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

3、等邊三角

imageimageimageimage

上三角CSS程式碼如下：設定border-bottom寬度實線顏色，左右border左右寬度為一半，實線透明。下三角、左三角、右三角可舉一反三實現。

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

4、直角三角

imageimageimageimage

左上三角CSS程式碼如下：border-top設定寬度實線顏色，border-right等寬實線透明。右上三角、左下三角、右下三角可舉一反三實現。

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red; 
    border-right: 100px solid transparent;          
}

5、平行四邊形

image

CSS程式碼如下：transform: skew，傾斜角度即為四邊形銳角的餘角

#parallelogram {
    width: 150px;
    height: 100px;
    margin-left:20px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
}

6、梯形

image

CSS程式碼如下：上底長為width的值，下底長為width+border-left+border-right之和，高為border-bottom

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

7、五邊形（五角大樓）

image

CSS程式碼如下：

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
}

8、六邊形

image

CSS程式碼如下：

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
}
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

9、八邊形

image

CSS程式碼如下：

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
}
 
#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;    
    border-bottom: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}
 
#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;    
    border-top: 29px solid red;
    border-left: 29px solid #eee;
    border-right: 29px solid #eee;
    width: 42px;
    height: 0;
}

10、五角星

image

CSS程式碼如下：

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
    
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

11、六角星

image

CSS程式碼如下：一個上三角和一個下三角拼合而成

#star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}
#star-six:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}

12、八角星

image

CSS程式碼如下：

#burst-8 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
         -o-transform: rotate(20eg);
            transform: rotate(20deg);
}
#burst-8:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    -webkit-transform: rotate(135deg);
       -moz-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
         -o-transform: rotate(135deg);
            transform: rotate(135deg);
}

13、十二角星

image

CSS程式碼如下：

#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
}
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
}
#burst-12:before {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}
#burst-12:after {
    -webkit-transform: rotate(60deg);
       -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
         -o-transform: rotate(60deg);
            transform: rotate(60deg);
}

14、愛心

image

CSS程式碼如下：

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

15、無窮大符號

image

CSS程式碼如下：

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
}
 
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
 
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

16、雞蛋

image

CSS程式碼如下：

#egg {
   display:block;
   width: 126px; 
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius:        50%   50%  50%  50%  / 60%   60%   40%  40%;
}

17、食豆人（Pac-Man）

CSS程式碼如下：
#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

18、提示對話方塊

image

CSS程式碼如下：

#talkbubble {
   width: 120px; 
   height: 80px; 
   background: red;
   position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

19、鑽石

image

CSS程式碼如下：

#cut-diamond {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
}
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
}

20、陰陽八卦

image

CSS程式碼如下：

#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
 
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
 
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

相關推薦

微信小程式樣式三角形搭建

直接上程式碼：.pledgecont::before { content: ''; width: 0; height: 0; border-bottom: 14px solid #fff; border-left: 8px solid transparent;

微信小程式————樣式

                                 微信小程式————樣式 一、基本選擇器 &nb

微信小程式教程（搭建簡單的小程式示例）

微信小程式是一個挺神奇的存在，它的出現使app不是那麼的友好了，還要下載還要更新，但是小程式就不是了，就內嵌在微信裡，隨時用，不用下載（其實就相當於載入到本地，不過佔用記憶體很小），微信伺服器一更新就好了，這樣多方便，小程式我剛開始接觸還是蠻暈的，和正常的套路不太一樣，不過它的js和vue,

微信小程式開發框架搭建

使用開發工具的正確姿勢 微信提供的開發工具的編輯功能不是一般的水,寫程式碼肯定不能用它,否則就是浪費生命.不說別的,連自動儲存都沒有,第一次寫時寫了一個多小時,後面下班直接關掉,也不彈出提示說沒儲存.然後第二天過來,寫的程式碼全沒了!!! 頓時感到巨坑無比.這

微信小程式開發環境搭建

微信小程式可謂是今天最火的一個名詞了，一經出現真是轟炸了整個開發人員，當然很多App開發人員有了一個擔心，微信小程式的到來會不會給移動端App帶來一個寒冬，身為一個Android開發者我是不相信的，他只不過提供了一個新的流量入口，給一些企業多了一種選擇，即使有，

微信小程式樣式-class類選擇器的使用教程

類選擇器語法 在 CSS 中，類選擇器以一個點號顯示： .center {text-align: center} 在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。 在下面的 HTML 程式碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守

微信小程式樣式Flex Box精通課程-Flex專案的屬性-margin（對齊和居中）

margin（對齊和居中） 預設樣式和程式碼 效果如圖 Wxml程式碼 <view class='zong'> <view class='fangxing1'> <text>01</text>

微信小程式樣式Flex Box精通課程-Flex專案的屬性-align-self（子元素上中下的設定）

align-self（子元素上中下的設定） 基礎語法 align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。 預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。 .

微信小程式樣式Flex Box精通課程-Flex專案的屬性-flex綜合屬性設定

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。 .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'

微信小程式樣式Flex Box精通課程-Flex專案的屬性-flex-basis專案佔據的主軸空間

flex-basis專案佔據的主軸空間 flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。 瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。 .item { flex-basis: <length

微信小程式樣式Flex Box精通課程-Flex專案的屬性-flex-shrink專案的縮小比例

flex-shrink專案的縮小比例 基礎語法 flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。 .item { flex-shrink: <number>; /* default 1 */ } 如果所

微信小程式樣式Flex Box精通課程-Flex專案的屬性-flex-grow專案的放大比例

flex-grow專案的放大比例 基礎語法 flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。 .item { flex-grow: <number>; /* default 0 */ } 如果所有專案的flex-

微信小程式樣式Flex Box精通課程-Flex專案的屬性-order子元素的排序

order子元素的排序 基礎語法 order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。 .item { order: <integer>; } 小程式應用 預設效果 效果如圖 Wxml程式碼 <view

微信小程式樣式Flex Box精通課程-Flex容器的屬性-flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。 .box { flex-flow: <flex-direction> || <flex-wrap>; } 歡迎大家收看我的視訊教程

微信小程式樣式Flex Box精通課程-Flex容器的屬性-justify-content內容對齊(左中右)

justify-content內容對齊 基礎語法 justify-content屬性定義了專案在主軸上的對齊方式。（左中右） .box { justify-content: flex-start | flex-end | center | space-between | spac

微信小程式樣式Flex Box精通課程-Flex容器的屬性-align-items(上中下對齊)

align-items(上中下對齊) 基礎語法 align-items屬性定義專案在交叉軸上如何對齊。（上中下） .box { align-items: flex-start | flex-end | center | baseline | stretch; } 它可能取5個

微信小程式樣式Flex Box精通課程-Flex容器的屬性-align-content設定各個行的對齊

align-content設定各個行的對齊 align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設定彈性子元素的對齊，而是設定各個行的對齊 .box { align-items: flex-sta

微信小程式——1、搭建自己的Https伺服器

一、註冊微信小程式       進入微信公眾平臺，使用郵箱賬號，選擇註冊小程式賬號。一個郵箱只能註冊一個型別的微信賬號（訂閱號、服務號、小程式）。 二、搭建Https伺服器       1、域名註冊         1.1、登入騰訊雲平臺，並註冊賬號。         1

SpringBoot微服務的https配置方法（即微信小程式後臺服務搭建解決方案）

前言最近接觸了一個有關微信小程式的專案。有關小程式後臺服務的https配置踩了不少坑，折騰了一兩天時間，終於實現了小程式後臺服務的部署。這裡就總結一下基於微信小程式，有關SpringBoot後臺的配置方案。分析一下微信官方文件根據小程式官方文件描述，微信小程式的wx.requ

基於Ubuntu搭建微信小程式服務

準備域名和證書 小程式後臺服務需要通過 HTTPS 訪問，在實驗開始之前，我們要準備域名和 SSL 證書。 域名註冊 如果您還沒有域名，可以在騰訊雲或者阿里雲上選購。 域名解析 域名購買完成後, 需要將域名解析到實驗雲主機上，實驗雲主機的 IP 為： <您的 CVM