css css编写三角形和半圆

三角的四个方向可修改，根据：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 >

css css编写三角形和半圆相关推荐

[css] 用css创建一个三角形，并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
html5 css 三角形,css怎么画三角形？
css怎么画三角形?下面本篇文章就来给大家介绍一下使用CSS画三角形的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么画三角形? 三角形实现原理:宽度width为0: ...
html div三角形,css+div打造三角形(箭头)
在很多网站都见过这样的箭头 ,之前我一直以为是图片,直到今天才知道原来可以用css做.开始看代码没太看懂,后来自己试了几遍才恍然大悟.贴出来分享下.(大神请直接忽略) 先看代码: HTML部分就是一个 ...
玩转CSS盒子之三角形盒子
玩转CSS盒子之三角形盒子 CSDN用户名:jcLee95 邮箱:291148484@163.com 本文地址:https://blog.csdn.net/qq_28550263/article/d ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解
传统的圆角矩形实现,必须使用多张图片作为背景图案.CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了. css实现圆角矩形.半圆.圆形效果的优点: * 减少维护的工作量, ...
使用CSS画一个三角形
效果图全部代码 <!DOCTYPE html> <html> <head><title></title><style type=&q ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...

css css编写三角形和半圆

css css编写三角形和半圆相关推荐

最新文章

热门文章