css css编写三角形和半圆

最新推荐文章于 2025-03-20 16:32:46 发布

原创最新推荐文章于 2025-03-20 16:32:46 发布 · 975 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#三角形

Css 专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用CSS代码绘制三角形和半圆形，并通过调整border属性实现不同样式的变化。

三角的四个方向可修改，根据：border-top-color:; border-bottom-color:; border-left-color:; border-right-color:;

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>三角形</title>
   <style>
      .icon-b {
         display: inline-block;
         width: 0px;
         height: 0px;
         border: 10px solid transparent;
         border-top-color: #2fa0ec;
         position: relative;
         left: 3px;
         top: 2px;
      }
   </style>
</head>
<body>
   <b class="icon-b"></b>
</body>
</html>

<style>
    .semicircle {
         display: inline-block;
         width:18px;
         height:29px;
         border-radius:18px 0 0 18px;/* 左上、右上、右下、左下 */
         border:1px solid #feb34a;
         border-right: #fff;
         position: relative;
         top: 10px;
         right: -7px;
    }
</style>
<span class="semicircle"></span>

border-right设置右边线为白色；可改变为右图。

<style>
    .collection a{
        font-size: 14px;
        padding: 9px 0 9px 10px;
        color: #feb34a;
        text-decoration: none;
        border: 1px solid #feb34a;
        border-top-left-radius: 22px;
        border-bottom-left-radius: 22px;
        border-right: none;
    }
    .semic-text{
        margin-right: 20px
    }
</style>
<div class="collection">              
    <a><span class="semic-text">收藏</span></a>
</div>