网站首页 网站建设 IT知识 IT知识教程 CSS实现三角效果的简单实例

CSS实现三角效果的简单实例

2021-05-08 21:12:47

方法一：使用border来设置边框，元素有高度和宽度

XML/HTML Code复制内容到剪贴板
  • <iclass="triangle"></i>
  • .triangle{
  • transform:rotate(45deg);
  • display:block;
  • width:12px;
  • height:12px;
  • border:1pxsolid#9e9e9e;
  • border-top-color:transparent;
  • border-right-color:transparent;
  • background-color:#fff;
  • }

    • 效果：

    利用transform属性可以旋转三角形，达到想要的效果。

    方法二：利用border来撑起来三角形

    XML/HTML Code复制内容到剪贴板
  • <iclass="triangle"></i>
  • .triangle{
  • display:block;
  • position:absolute;
  • width:0;
  • border-width:6px;
  • border-color:transparenttransparentred;
  • border-style:dasheddashedsolid;
  • top:-12px;
  • right:76px;
  • }

    • 效果：

    应用场景：点击234或者点击选中的时候三角形指向对应的选项

    小贴士：

    1、学会经常使用伪元素例如after或者before来实现三角形

    2、两种方法的区别：第二种方法设置的三角形背景色和边框的颜色相同；第一种方法设置的三角形背景色和边框的颜色可以不相同；需要根据不同应用场景效果来选择方法。

    第二种方法也可以通过使用两个颜色不同的三角形覆盖来实现背景色和边框色不同的效果。

    以上这篇CSS实现三角效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

    声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。

    相关文章

    WPF实现平面三角形3D运动效果
    本文实例为大家分享了WPF实现平面三角形3D运动效果的具体代码，供大家参考，具体内容如下实现效果如下：思路：封装三角形三个顶点和路径的三角形类，图形渲染时同步更
    用@font-face实现网页特殊字符(制作自定义字体)
    　　前几天写了篇文章，就是用css来实现三角箭头，虽然达到需要的效果了，但还是有一些问题，比如依旧需要靠position来定位箭头的位置。而且目前也只能实现三角
    纯CSS画的三角形并可翻转
    三角形翻转的效果，大家想必见过，这里就把相关代码贴下，大家可以应用哦，当然翻转效果暂时不支持IE678。1、纯CSS做个三角代码如下：.rightdirecti
    WPF实现背景灯光随鼠标闪动效果
    本文实例为大家分享了WPF实现背景灯光随鼠标闪动的具体代码，供大家参考，具体内容如下实现效果如下：思路：将容器分割成组合三角形Path，鼠标移动时更新每个三角形
    Python利用for循环打印星号三角形的案例
    简单的for循环打印三角形1，for循环方法实现星星三角代码：foriinrange(0,5):forjinrange(i+1):ifi==4:print("*

    最新文章

    载入进度条 效果
    邮件发送简单例子-html文件
    详解关于html，css，js三者的加载顺序问题
    限制复选框的最大可选数
    随鼠标上下滚动的jquery代码

    hot 热门文章

    python模拟登陆Tom邮箱示例分享
    苹果11抖音怎么投屏? iphone将投影投屏到电视的技巧
    蚂蚁森林节气签怎么领
    华为mate30怎么更新系统？华为mate30更新手机系统教程
    小米电视怎么下载斗鱼

    猜你喜欢

    JavaScript 命名空间 使用介绍
    javascript ���名规则 变量命名规则
    javascript 秒表计时器实现代码
    Javascript 面向对象之重载
    JavaScript 面向对象之命名空间
    以上产品还未完全满足我的所有需求，在下方提交我的专属需求
    我的专属需求：
    *手机号：
    *验证码：
    img
    咨询报价
    现在咨询
    img

    在线咨询

    建站在线咨询
    img

    获取方案

    获取建站报价/方案

    我们联系您img

    img

    微信咨询

    扫一扫添加
    动力姐姐微信
    img
    img

    TOP

    我们尽快联系您