css3实现虚拟三角形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*上箭头*/
        .triangle-up {
            width:0;
            height:0;
            border:10px solid transparent;
            border-bottom-color:yellow;
        }
        /*下箭头*/
        .triangle-down {
            width:0;
            height:0;
            /*transform: translate(-50%,-50%);*/
            border:10px solid transparent;
            border-top-color:yellow;
        }
        /*左箭头*/
        .triangle-left {
            width:0;
            height:0;
            border:10px solid transparent;
            border-right-color:yellow;
        }
        /*右箭头*/
        .triangle-right {
            width:0;
            height:0;
            /*transform: translate(-50%,0);*/
            border:10px solid transparent;
            border-left-color:yellow;
        }
    </style>
</head>
<body>
    <div class="triangle-right"></div>
</body>
</html>
时间: 2024-08-28 13:21:42

css3实现虚拟三角形的相关文章

CSS3做小三角形

上图是项目得到的图片,代码如下 1 <div class="welcome"> 2 <span>管理员:8888</span> 3 您的登陆时间是:2015/3/17 21:31:39 4 </div> 代码非常简单直接,就是一个登陆信息的展示. 前面的小三角形是用CSS3做的.CSS代码如下: 1 div.welcome:before { 2 content:""; 3 border-width: 10px 0 10

【CSS3进阶】酷炫的3D旋转透视

之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研究学习了一下相关的 CSS3 属性.webpack 的 LOGO 动画效果乍看不是很难,深入了解之后,觉得内部其实大有学问,自己折腾了一番,做了一系列相关的 CSS3 动画效果. 先上 demo ,没有将精力放在兼容上,请用 chrome 打开. 本文完整的代码,以及更多的 CSS3 效果,在我 g

Java 学习文章汇总

目前JAVA可以说是产业界和学术界最热门的语言,许多人都很急切想把JAVA学好. 但学习是需要步骤的,除非像电影中演的那样,能够把需要的专业技巧下载到脑海:主角只花了几秒下载资料,就马上具备飞行员的技巧,或是武侠小说中的运功传送内力的方式,否则花上一段时间苦学是少不了的.花时间,不打紧,就怕方法错误,事倍功半. java 学习文章推荐.java学习线路.java 知识图谱. HTML5 微数据 RDFa/微格式 使用 jQuery 的 Autocomplete 插件实现input输入提示功能 创

##常用效果css##

1    绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块.元素被设置成,absolute,原有的位置会被占用,设为 relative原位置保留,此时不设置 left,top还是statuc的效果.但可以 对内部的绝对定位起到标准依据效果. li width:100%  相对于 ul而言: 2    文本换行与不换行 一般都会使用word-break: keep-all;white-space:nowrap;使得强制不换行. word-

css钻石旋转实现

css钻石旋转实现: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* 钻石旋转 * 要实现这个钻石旋转: 首先需要明确这个钻石分为上下两个部分,上面包含六个正三角形,下面有6个倒三角形 * css实现正三角形:上右下左的方向 border-s

Kossel的一种滑块位置计算方法

做了一个小激光雕刻机之后,研究了一下这款3D打印机的结构和工作原理,一下就对这个运动过程很感兴趣,这三个杆是怎么联动使得喷头保持在一个平面上运动呢?打算先做一个架构,然后把激光器放在上面不是可以方便雕刻不同厚度的东西了么,好吧,我承认也想做一下这个3D打印机.不过,入坑的时候,一点一点的下而已. 写这个算法,需要首先简化一下模型,做一些转化和定义: 1.并联臂两根,简化成1根,假定为1根(对算法结果没影响,我猜两根就是为了更好的在重力不平衡的情况下保持平面的稳定性.有不对的地方还请大手子指教).

CSS3—三角形

话不多说看效果:演示效果,runjs 1.加了宽高和border,边用不同颜色显示,每条边都是一个梯形 2.去掉宽高,每条边都是三角形 3.只显示其中一条边就是不同的三角形了,是不是很简单,改变border四条边宽度试试吧~ 上述代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/ht

使用css3制作正方形、三角形、扇形和饼状图

1.利用边框制作正方形 如果将盒容器的width和height设置为0,并为每条边设置一个较粗的width值和彼此不同的颜色,最终会得到四个被拼接在一起三角形,它们分别指向不同的颜色. html代码:<div id="square">11</div> css3代码: #square{ width:0; height:0; border-width:100px; border-style:solid; border-color: red blue green ye

【转载】酷酷的CSS3三角形运用

转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工爸爸来切图,做一些圆角.阴影.锯齿或者一些小图标. 在CSS3出现后,借助一些具有魔力的CSS3属性,使得这些元素大多都可以由开发人员自己来完成.在开始阅读这篇文章前,我们先喊个口号:不想当艺术家的程序员不是好设计师! 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在