整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
前在這篇文章中 -- 《老生常談之 CSS 實現三角形》，介紹了 6 種使用 CSS 實現三角形的方式。
但是其中漏掉了一個非常重要的場景，如何使用純 CSS 實現帶圓角的三角形呢？，像是這樣：
本文將介紹幾種實現帶圓角的三角形的實現方式。
想要生成一個帶圓角的三角形，代碼量最少、最好的方式是使用 SVG 生成。
使用 SVG 的 多邊形標簽 <polygon> 生成一個三邊形，使用 SVG 的 stroke-linejoin="round" 生成連接處的圓角。
代碼量非常少，核心代碼如下：
<svg width="250" height="250" viewBox="-50 -50 300 300">
<polygon class="triangle" stroke-linejoin="round" points="100,0 0,200 200,200"/>
</svg>.triangle {
fill: #0f0;
stroke: #0f0;
stroke-width: 10;
}實際圖形如下：
這里，其實是借助了 SVG 多邊形的 stroke-linejoin: round 屬性生成的圓角，stroke-linejoin 是什么？它用來控制兩條描邊線段之間，有三個可選值：
我們實際是通過一個帶邊框，且邊框連接類型為 stroke-linejoin: round 的多邊形生成圓角三角形的。
如果，我們把底色和邊框色區分開，實際是這樣的：
.triangle {
fill: #0f0;
stroke: #000;
stroke-width: 10;
}那么如何控制圓角大小呢？也非常簡單，通過控制 stroke-width 的大小，可以改變圓角的大小。
當然，要保持三角形大小一致，在增大/縮小 stroke-width 的同時，需要縮小/增大圖形的 width/height：
完整的 DEMO 你可以戳這里：CodePen Demo -- 使用 SVG 實現帶圓角的三角形
不過，上文提到了，使用純 CSS 實現帶圓角的三角形，但是上述第一個方法其實是借助了 SVG。那么僅僅使用 CSS，有沒有辦法呢？
當然，發散思維，CSS 有意思的地方正在于此處，用一個圖形，能夠有非常多種巧妙的解決方案！
我們看看，一個圓角三角形，它其實可以被拆分成幾個部分：
所以，其實我們只需要能夠畫出一個這樣的帶圓角的菱形，通過 3 個進行旋轉疊加，就能得到圓角三角形：
那么，接下來我們的目標就變成了繪制一個帶圓角的菱形，方法有很多，本文給出其中一種方式：
<div></div>div {
width: 10em;
height: 10em;
transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
}div {
width: 10em;
height: 10em;
transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866);
+ border-top-right-radius: 30%;
}至此，我們就順利地得到一個帶圓角的菱形了！
接下來就很簡單了，我們只需要利用元素的另外兩個偽元素，再生成 2 個帶圓角的菱形，將一共 3 個圖形旋轉位移拼接起來即可！
完整的代碼如下：
<div></div>div{
position: relative;
background-color: orange;
}
div:before,
div:after {
content: '';
position: absolute;
background-color: inherit;
}
div,
div:before,
div:after {
width: 10em;
height: 10em;
border-top-right-radius: 30%;
}
div {
transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
div:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0,-50%);
}
div:after {
transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}就可以得到一個圓角三角形了！效果如下：
完整的代碼你可以戳這里：CodePen Demo -- A triangle with rounded
完了嗎？沒有！
上述方案，雖然不算太復雜，但是有一點還不算太完美的。就是無法支持漸變色的圓角三角形。像是這樣：
如果需要實現漸變色圓角三角形，還是有點復雜的。但真就還有人鼓搗出來了，下述方法參考至 -- How to make 3-corner-rounded triangle in CSS。
同樣也是利用了多塊進行拼接，但是這次我們的基礎圖形，會非常的復雜。
首先，我們需要實現這樣一個容器外框，和上述的方法比較類似，可以理解為是一個圓角菱形（畫出 border 方便理解）：
<div></div>div {
width: 200px;
height: 200px;
transform: rotate(30deg) skewY(30deg) scaleX(0.866);
border: 1px solid #000;
border-radius: 20%;
}接著，我們同樣使用兩個偽元素，實現兩個稍顯怪異的圖形進行拼接，算是對 transform 的各種用法的合集：
div::before,
div::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
}
div::before {
border-radius: 20% 20% 20% 55%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
background: red;
}
div::after {
border-radius: 20% 20% 55% 20%;
background: blue;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}為了方便理解，制作了一個簡單的變換動畫：
本質就是實現了這樣一個圖形：
最后，給父元素添加一個 overflow: hidden 并且去掉父元素的 border 即可得到一個圓角三角形：
由于這兩個元素重疊空間的特殊結構，此時，給兩個偽元素添加同一個漸變色，會完美的疊加在一起：
div::before,
div::after, {
background: linear-gradient(#0f0, #03a9f4);
}最終得到一個漸變圓角三角形：
上述各個圖形的完整代碼，你可以戳這里：CodePen Demo -- A triangle with rounded and gradient background
本文介紹了幾種在 CSS 中實現帶圓角三角形的方式，雖然部分有些繁瑣，但是也體現了 CSS ”有趣且折磨人“ 的一面，具體應用的時候，還是要思考一下，對是否使用上述方式進行取舍，有的時候，切圖也許是更好的方案。
篇將介紹幾個css小技巧，目錄如下：
默認q標簽引用符號是瀏覽器根據不同語言環境自動設置的，當然我們也可以使用quotes屬性自定義符號，如下實例：
html：
<p>
<div>
<q>不亂于心，不困于情。不畏將來，不念過往。如此，安好</q>
</div>
<div class="q1">
<q>聽君一席話，勝讀十年書</q>
</div>
<div class="q2">
<q>理想的人物不僅要在物質需要的滿足上,還要在精神旨趣的滿足上得到表現</q>
</div>
<div class="q3">
<q>學問是經驗的<q>積累</q>,才能是刻苦的<q>忍耐</q></q>
</div>
<br>
</p>css：
q{
font-size: 30px; /*默認*/
}
div.q1 q{
quotes:"#" "#";
}
div.q2 q {
quotes: none; /*無符號*/
}
div.q3 q {
quotes: "“" "?" "?" "?"; /*嵌套引用，第三、四符號用于嵌套q標簽*/
}效果如下：
僅使用一個屬性將所有樣式重置為默認值。
代碼如下：
html：
<div class="reset-all-styles">
<h5>Title</h5>
<p>
《書·大禹謨》：“名言茲在茲，允出茲在茲，惟帝念功。”孔傳：“名言此事，必在此義。”
</p>
</div>css：
.reset-all-styles {
all: initial;
}如果不想某些文字被選擇，可以使用如下代碼：
html：
<p class="unselectable">你選不中我！</p>css：
.unselectable {
user-select: none;
}使用純 CSS 創建一個三角形。
html:
上<div class="triangle up"></div>
右<div class="triangle right"></div>
下<div class="triangle down"></div>
左<div class="triangle left"></div>css:
.triangle {
width: 0;
height: 0;
border-style:solid;
border-width:20px;
}
/*上*/
.up{
border-color:transparent transparent #9C27B0 transparent;
}
/*右*/
.right{
border-color:transparent #9C27B0 transparent transparent;
}
/*下*/
.down{
border-color:transparent transparent #9C27B0;
}
/*左*/
.left{
border-color:transparent transparent transparent #9C27B0;
}熱門文章推薦：
css中4種方法使內容居中
前端入門——css 盒子模型
前端入門——css顏色和背景
前端入門——css邊框和圓角
前端入門——css 選擇器
前端入門——css字體和文本
信大家也會瀏覽招聘網站的招聘要求，基本上每一家的找前端的要求都包含必須要精通CSS3。這次和大家來講一下css3,在前端編程中，html，css，js分別被稱之為前端編程中的骨，肉，魂。
html搭建前端頁面的結構，就像是人的骨骼一般，支撐整個頁面。
css控制前端頁面顯示的效果和布局，就像是人的血肉一般，使得整個頁面更加生動，靈活。
js控制前端頁面的業務邏輯，就像是人的靈魂一般，讓頁面能像一個人一樣做該做的事情。
所謂的css3是什么呢？
其實也沒有什么神秘，就是css(Cascading Style Sheets,層疊樣式表)的第三個版本，相對于之前的css，它有了更多優秀的，適合頁面需要的布局以及效果。可以說如果我們掌握了css3，那么我們可以更加靈活的，符合需求的來完成頁面的需求。做出更加美觀，簡潔的頁面。
css3到底需要學習什么？
css3需要學習的是css3新增的選擇器，樣式屬性。
css3新增的選擇器讓我們可以更加靈活的選擇頁面中的元素并為其設置樣式。
css3新增的樣式屬性可以讓我們設置頁面的效果和布局，提供了更多，更加符合需要的樣式屬性。
CSS3 邊框
通過 CSS3 可以創建圓角邊框、添加陰影框，可以使用圖片來繪制邊框，而不需要使用設計軟件，比如 PS。
CSS3 增加了3個新的邊框屬性：border-radius、box-shadow 和 border-image。
CSS3 圓角邊框
在 CSS2 中添加圓角邊框需要技巧，而且很費事，必須在每個角使用不同的圖片。使用 CSS3 可以很容易的創建圓角。CSS3 的 border-radius 屬性用于創建圓角。
CSS3 邊框陰影
CSS3 的 box-shadow 屬性用于向盒子添加陰影效果。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
