精华内容
下载资源
问答
  • CSS实现DIV三角形

    千次阅读 2015-06-02 23:27:45
    <div class="t-border"></div> <div class="t-inset"></div> </div> </div> /*外框容器*/ .mod-container { width:100px; height:60px; border:1px solid #000; margin:20px; background:#fff; } /*小三角...

    本文内容收集来自网络

    #triangle-up {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid red;
    }

    #triangle-down {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid red;
    }

    #triangle-left {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-right: 100px solid red;
        border-bottom: 50px solid transparent;
    }

    #triangle-right {
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-left: 100px solid red;
        border-bottom: 50px solid transparent;
    }

    #triangle-topleft {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
    }

    #triangle-topright {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-left: 100px solid transparent; 
    }

    #triangle-bottomleft {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-right: 100px solid transparent;
    }

    #triangle-bottomright {
        width: 0;
        height: 0;
        border-bottom: 100px solid red;
        border-left: 100px solid transparent;
    }

    <!-- 外框 -->
    <div class="mod-container">
        <!-- 小三角部分 -->
        <div class="mod-triangle">
            <div class="t-border"></div>
            <div class="t-inset"></div>
        </div>
    </div>
    /*外框容器*/
    .mod-container {
        width:100px;
        height:60px;
        border:1px solid #000;
        margin:20px;
        background:#fff;
    }
    /*小三角部分*/
    .mod-triangle {
        display:block;
        position:relative;
        left:-23px;
        top:18px;
        z-index:20;
    }
    .mod-triangle .t-border,
    .mod-triangle .t-inset{
        left:0px;
        top:0px;
        width:0;
        height:0;
        font-size:0;
        overflow:hidden;
        position:absolute;
        border-width:12px;
        /*可在此处更改小三角方向:上-右-下-左(solid的位置)*/
        border-style:dashed solid dashed dashed;
    }
    /*小三角的边框,如果不需要,可将颜色值改变*/
    .mod-triangle .t-border{
        border-color:transparent #000 transparent transparent;
        left:-1px;
    }
    .mod-triangle .t-inset{
        border-color: transparent #fff transparent transparent;
    }

    
    

     

    展开全文
  • 纯CSS实现div三角效果

    2019-09-20 14:15:30
    效果图: 方法一的效果图 ...<div id="first"> 带背景颜色的小三角实现是比较... 不管写什么内容,总之就是要实现无图小三角,要是有背景颜色那倒是极好的,没有的话也可以,就是稍微麻烦一点 </div>

    效果图:

    方法一的效果图

    方法二的效果图

    方法三的效果图


    方法一:

    css代码:

    1. #top {  
    2.  positionabsolute;  
    3.  width0px;  
    4.  height0px;  
    5.  line-height0px;/*为了防止ie下出现题型*/  
    6.  border-bottom10px solid #89b007;  
    7.  border-left10px solid #fff;  
    8.  border-right10px solid #fff;  
    9.  left76px;  
    10.  top: -10px;  
    11. }  
    12. #first {  
    13.  border-radius:8px;  
    14.  -moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;  
    15.  positionabsolute;  
    16.  height150px;  
    17.  width300px;  
    18.  background#89b007;  
    19.  left22px;  
    20.  top33px;  
    21. }  
    22. #first p{ padding:10pxline-height:1.5; color:#FFF;}  


    html代码:
    <div id="first">
    <p>带背景颜色的小三角实现是比较简单的!</p>
      <span id="top"></span>
    </div>


    方法二:

    css代码:

    1. * {  
    2. margin: 0;  
    3. padding: 0;  
    4. }  
    5. a{ color:#666text-decoration:noneline-height:25pxtext-indent:24px;}  
    6. .w{ width:200pxposition:absolutebackground:#999left:400pxtop:200pxfont-size:12pxtext-align:left}/*模拟灰色阴影背景层*/  
    7.   
    8. .x{ width:180pxposition:relativebackground:#fff;  border:1px solid #cccpadding:10pxleft:-4pxtop:-4px;}/*内容div*/  
    9. .y , .z{  
    10. positionabsolute;  
    11. left141px;  
    12. }  
    13. .y{  
    14. color#ccc;  
    15. font-size19px;  
    16. top:-12px;  
    17. z-index:1;  
    18. }/*模拟小三角*/  
    19.   
    20. .z{  
    21. color#fff;  
    22. font-size19px;  
    23. top:-11px;  z-index:3;  
    24. }/*模拟小三角*/  


    html代码:
    <div class="w">
      <div class="x">
        <p><a href="#">用面向对象的思想去书写css,用面向对象的心态去书写css。</a></p>
        <span class="z">◆</span> <span class="y">◆</span> </div>
    </div>


    方法三:

    css代码:

    1. #content {  
    2. text-indent: 2em;  
    3. box-shadow: 0px 0px 10px #999;  
    4. padding10px;  
    5. font-size12px;  
    6. line-height: 1.5;  
    7. border-radius: 5px;  
    8. height100px;  
    9. width250px;  
    10. positionrelative;  
    11. margin200px auto;  
    12. border1px solid #CCC;  
    13. }  
    14.   
    15. span {  
    16. positionabsolute;  
    17. left25px;  
    18. height0px;  
    19. width0px;  
    20. }  
    21. /*上部小三角实现样式开始*/  
    22. span.out {  
    23. line-height: 0;  
    24. border-width10px;  
    25. border-colortransparent transparent #CCC transparent;  
    26. border-styledashed dashed solid dashed;  
    27. top: -20px;  
    28. }  
    29. span.iner {  
    30. border-width10px;  
    31. border-color#fff transparent #FFF transparent;  
    32. border-styledashed dashed solid dashed;  
    33. top: -19px;  
    34. line-height: 0;  
    35. }  
    36.   
    37. /*右部小三角实现样式开始*/  
    38. span.rightright {  
    39. background#FFF;  
    40. border-width1px;  
    41. width16px;  
    42. height16px;  
    43. border-color#CCC #CCC transparent transparent;  
    44. border-stylesolid solid dashed dashed;  
    45. left270px;  
    46. top30px;  
    47. border-radius: 0 0 100% 0;/*这里radius的值不要选取绝对值因为在放大或者缩小的过程中会产生封不住口的现象*/  
    48. line-height: 0;  
    49. box-shadow: 5px 0 10px #aaa;  
    50. }   

    html代码:
    <div id="content"> <span class="out"></span><span class="iner"></span> <span class="right"></span>
      <p>不管写什么内容,总之就是要实现无图小三角,要是有背景颜色那倒是极好的,没有的话也可以,就是稍微麻烦一点</p>
    </div>

    展开全文
  • css实现三角形,div实现三角形缺口

    千次阅读 2020-04-24 17:59:07
    1、css实现三角形 有时候面试题或者日常需求中会有用纯css来实现三角形的例子,目前本人的知识量只能提供两种方案 ...div{ border:40px solid; border-left-color: lightslategrey; border-right-color: l...

    1、css实现三角形

    有时候面试题或者日常需求中会有用纯css来实现三角形的例子,目前本人的知识量只能提供两种方案

    首先是第一种,也是最常用的就是border法

    1-1 border实现三角形

    div{
          border:40px solid;
          border-left-color: lightslategrey;
          border-right-color: lightcoral;
          border-top-color: lawngreen;
          border-bottom-color: lightgreen;
          box-sizing: border-box;
          width: 40px;
    }            
    

    效果如下,如果你想要某一个方向的三角形,其他角度的颜色设置为透明就可以

    比如我只想要粉色的三角形

    /*顺序分别是上右下左*/
    border-color: transparent lightcoral transparent transparent;
    

     

    1-2 通过linear-gradient()来实现三角形

    div{
      width: 50px;
      height: 50px;
      background: linear-gradient(-45deg, red 50%, transparent 50% ) ;
    }

    效果图如下:

    那么就简单介绍一下 linear-gradient() 是css当中background的  渐变函数

    他的第一个参数是指你开始的角度,角度图我从网上找了一个示意图,-45deg就代表就右下角到左上角,135deg就代表是左上角到右下角,你也可以直接指定方向 (left/right/top/bottom  to  left/right/top/bottom )

    第二个参数是指定颜色,一般肯定是多个颜色的,因为要实现一个渐变的效果  后面的50%,可写可不写,写了就代表红色占了50%,这里划重点!!如果你第二个参数中的百分比,第一个参数大于等于第二个参数百分比,就不会出现渐变,比如

      {
        background: linear-gradient(-45deg, red 50%, blue 50% ) ;
      }    
    

    因为每个元素占据了50%=50%,所有中间没有渐变效果,但是!

    ​
      {
        background: linear-gradient(-45deg, red 20%, blue 50% ) ;
      }    
    
    ​

    就会出现渐变了

    2、div实现缺角就是使用第三种方法

     width: 200px;
     height: 50px;
     background: linear-gradient(-45deg, transparent 20px, blue 0 ) ;

    展开全文
  • DIV+CSS写小三角

    2020-10-31 04:04:24
    DIV+CSS写小三角
  • div变成三角形

    千次阅读 2018-08-03 19:21:11
    .tranagleWhite{ width:0; height:0;... /*更改border的宽度即可改变三角的大小*/ border-color:transparent transparent white transparent; /*更改color可以改变三角的方向*/ } 效果图: ...
    .tranagleWhite{
    	width:0;
        height:0;
        border:100px solid;    /*更改border的宽度即可改变三角的大小*/
        border-color:transparent transparent white transparent;  
                    /*更改color可以改变三角的方向*/
    }

    效果图:

    展开全文
  • 用CSS对DIV画三角形

    千次阅读 2017-07-21 16:09:57
    用CSS对DIV画三角形
  • 怎样用div做三角形

    2019-09-22 05:28:49
    div></div>  width:0px;  height:0px;  border:10px solid red;  border-left-color:green;(如果想改变三角形的方向可以改变盒子的边框线的方向) 首行缩进: text-indent:后面跟px/em; em...
  • div三角

    2018-10-30 15:37:42
    div{ border:10px solid; border-color:#33 transparent transparent transparent; width:0; }
  • div边上三角箭头

    2020-12-17 17:25:04
    .selectLinkCon { position: absolute; background-color: #fff;... //根据三角的位置改变 } //此处是一个白色的三角 .selectLinkCon:before { border-width: 12px; border-bottom-color: #dcdfe6; left: 14px; }
  • div+css画三角形代码原理采用的是均分原理; 在矩形的直角,两条边的样式要均分,把 div 的宽 高设为零,四条边 top right bottom left 设置一个宽度, 把需要显示的一边设置有色,其他的设置透明,就这样一个三角形...
  • DIV+CSS实现三角图形

    2013-07-20 10:07:26
    DIV+CSS实现三角图形
  • div+css实现三角形,三角形内有字用div+css实现三角形,三角形内有字如下图:分享到:更多------解决方案--------------------html>无标题文档.a{border-bottom:1pxsolid#aaa;height:50px;width:100px;position...
  • div绘制各种三角形

    千次阅读 2018-07-30 17:24:10
    先来看看应用场景效果图 作用:悬浮左侧菜单栏时对该菜单进行简介 demo代码: html: &lt;div class="float-flag" style="top: 15px;...div class=".../div&...div cla
  • css用div做三角形

    2019-03-03 20:36:00
    <!DOCTYPE html> <title>Document .box { width:0; height: 0; margin: 100px auto; border: 90px solid ... <div class="box"></div> 将div不设置宽和高,直接用边框的透明做出这个效果。
  • border-left: 50px solid black; border-right: 50px solid transparent; border-top: 50px solid transparent; border-bottom: 50px solid transparent; 实现原理使用边框实现,使想要的一个三角形出来就设置一个...
  • div+CSS实现三角形

    2016-12-20 17:16:53
    div{ width: 0; height: 0; border-bottom: 10px solid white; border-top: 10px solid red; border-left: 10px solid white; border-right: 10px solid white; } 只要
  • css+div三角tip小提示

    千次阅读 2013-11-11 21:18:25
    css+div三角tip小提示 .w{ width:200px; position:absolute; background:#999; left:400px; top:200px; font-size:12px; text-align:left} .x{ width:180px; position:relative; background:#ff9; border:1px ...
  • 本文给大家带来一段代码基于div+css实现三角形提示框,代码简单易懂,需要的朋友可以参考下
  • 在很多网页中经常会有三角形角标作为导航指示器使用,比如sketch官网就有如下...对于一个常规的div框而言,给其设置正常宽高,并设置border.div__custom { position:relative; width: 32px; height: 32px; border-t
  • <div class=arrow-up> <!--向上的三角--> </div> <div class=arrow-down> <!--向下的三角--> </div> <div class=arrow-left> <!--向左的三角--> </div> <div class=arrow-right> <!--向右...
  • 用CSS将div变成三角形

    万次阅读 2017-01-05 20:51:09
    div { width : 0 ; height : 0 ; border : 100 px solid ; /* 平分效果 */ /*border-color:red green blue black; */ /* 单个三角形 */ border-color : transparent transparent lightgreen ...
  • css+div打造三角形(箭头)

    千次阅读 2018-07-09 10:10:59
    /* 设定div大小 */ width:0; height:0; /* 防溢出,稳固兼容性 */ overflow:hidden; /* 箭头尺寸 */ border-width:10px; /* 给箭头着色,四个值分别是边框的四个方向,箭头的方向正好相反 */ border-color:...
  • 网页中有很多三角行的部分,例如下图这两个例子 像这样的例子就可以用边框来做。 一、利用不同位置边框重合部分 两个相邻边框重合后会各分一半,像下面代码展示的一样 <!DOCTYPE html> <html> <...
  • 首先了解一下盒模型:盒模型先看一段代码:#div1{ height: 100px; border-style: solid; border-width: 100px 100px 100px 100px; border-color: red forestgreen blue cyan; ...
  • 主要介绍了 div+css样式自制带小三角的tooltips效果,需要的朋友可以参考下
  • css+div 定义三角形

    千次阅读 2014-08-12 09:38:26
    <div class="triangle"></div> css: .triangle{ width: 0; height: 0; border-left: 72px solid transparent; border-right: 72px solid transparent; border-top: 25px solid #719121; } 效果: ...
  • 通过上述代码,div的具体样式如下: 现在在上面基础上, 我们把div的宽高度都设为0时, 现在我们再次查看效果,如下图: 这时, 其实我们已经看到有上下左右四个三角形了....如果, 我们把4种...
  • 纯css在div上添加小三角 有些项目中会遇到这样的需求,就是div容器上要突出来一个小三角,如下图 虽然在功能上没啥意义,但是人家UI就是要这个小三角,你能怎么办,咱必须给他整出来! 我们用伪类和border来画这个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,996
精华内容 9,598
关键字:

div三角