純 CSS實現三角形

時間 2019-12-13

標籤 css 實現三角形欄目 CSS 简体版

原文原文鏈接

最近項目上作評論回覆，設計師提升交互性特地設計了小三角，以下：css

下面介紹一下實現效果的css方法：web

1.border 經過設置上下左右border寬度來實現。字體

　　首先查看一下所有設置的效果：spa

而後將寬高設爲0，就能夠獲得四個三角形，單獨設置一個border便可獲得三角形。3d

將其餘邊框都設爲透明，可獲得三角形orm

代碼以下：blog

要想實現項目要求的樣式，須要些兩個三角形重疊，而後外面的比內層的多出1px作邊框，利用兩個三角的背景色差實現border效果，io

代碼以下：

2 特殊字符 ◆ 來實現。

這種方法的場景是和矩形框結合，將◆的背景色設置爲矩形框的顏色便可。這裏就不寫矩形框了。經過調整font來實現調整三角形大小。

代碼：

<style>

　　.triangle{
　　　　overflow:hidden;
　　　　width:26px;
　　　　height:26px;
　　　　font:normal 26px "宋體"; // 字符的大小和字體也有關係哦！
　　}
　　.tg-border {
　　　　color:#C9E9C0;
　　}
　　.tg-background {
　　　　margin-top: -25px;
　　　　color:#E9FBE4;
　　}
</style>

<body>
　　<div class="triangle tg-border">◆</div>
　　<div class="triangle tg-background">◆</div>
</body>

3，矩形旋轉45度，

缺點是不能控三角形的角度。

<style>

　　.box { 　　　　margin-top: 50px; 　　　　position:relative; 　　　　width:200px; 　　　　height:50px; 　　　　background:#E9FBE4; 　　　　border:1px solid #C9E9C0; 　　　　border-radius:4px; 　　　　color:#0C7823; 　　} 　　.triangle{ 　　　　position:absolute; 　　　　top:-8px; 　　　　left:25px; 　　　　width:13px; 　　　　height:13px; 　　　　background:#E9FBE4; 　　　　border-top:1px solid #C9E9C0; 　　　　border-left:1px solid #C9E9C0; 　　} 　　.transform { 　　　　-webkit-transform:rotate(45deg); 　　　　-moz-transform:rotate(45deg); 　　　　-o-transform:rotate(45deg); 　　　　transform:rotate(45deg); 　　} </style> <body> 　　<div class="box"> 　　　　<div class="triangle transform"></div> 　　</div> </body>

相關標籤/搜索

每日一句

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