精华内容
下载资源
问答
  • css三角形
    2021-09-13 21:03:38

    css实现边框三角形

    这里我就用css样式写一个下三角的样式 其它方向一样 只需要给不想要显实的边框设置透明色即可

    div{
    	height: 0; width: 0;
    	border-top: 20px solid red;
    	border-right: 20px solid transparent;/*透明*/
    	border-bottom: 20px solid transparent;
    	border-left: 20px solid transparent;
    }
    

    在这里插入图片描述
    css实现消息框 上代码

    div{
          width:200px;height:100px;
           position: relative;
           top:30px; right:0px;
           padding:8px;
           background-color: #FFFFFF;
           border: red solid 1px;
           border-radius: 3px;
       }
       div:before{
           box-sizing: content-box;
           width: 0px; height: 0px;
           position: absolute;
           top: -16px; left:40px;
           padding:0;
           border-bottom:8px solid #FFFFFF;
           border-top:8px solid transparent;
           border-left:8px solid transparent;
           border-right:8px solid transparent;
           display: block;
           content:'';
           z-index: 12;
       }
       div:after{
           box-sizing: content-box;
           width: 0px; height: 0px;
           position: absolute;
           top: -18px; left:39px;
           padding:0;
           border-bottom:9px solid red;
           border-top:9px solid transparent;
           border-left:9px solid transparent;
           border-right:9px solid transparent;
           display: block;
           content:'';
           z-index:10
       }
    

    在这里插入图片描述

    实现思路 使用伪元素 一个矩形边框 分别用:after 和 :before写两个三角行 一个大一个小 互相盖住就能实现这样的效果了

    可以看着代码尝试一下哟

    更多相关内容
  • 手写笔三角形发生器使用 Stylus 生成 CSS 三角形的小混合。用法 triangle(width, height, direction, color) .make-me-a-triangle-babytriangle(10px, 10px, 'bottom', #000)新产品经理 npm install stylus-triangle...
  • css三角形

    2022-05-18 21:00:18
    制作css三角形,方向可以改,如果想朝向上方就消除border-top。 <title>用纯css创建一个三角形</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 0; ...

     制作css的三角形,方向可以改,如果想朝向上方就消除border-top。

    <title>用纯css创建一个三角形</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            #box {
                width: 0;
                height: 0;
                border-bottom: 200px solid red;
                /* border-top: 200px solid green; */
                border-left: 200px solid transparent;
                border-right: 200px solid transparent;
            }
        </style>
    </head>
    
    <body>
        <div id="box"></div>
    </body>
    <script>
        window.onload = function() {
            var box = document.getElementById('box');
        }
    </script>
    

    如果将左右不改transparent的话就是下面图形。transparent属性设置透明度。上面三角形是旁边透明状态 。不要设计为白色。​​​

     

       #box {
                width: 0;
                height: 0;
                border-bottom: 200px solid red;
                /* border-top: 200px solid green; */
                border-left: 200px solid pink;
                border-right: 200px solid black;
            }

    如果设计为白色。也是三角形。但是如果背景有颜色就会不一样的效果。

     body {
                background-color: blue;
            }
            
            #box {
                width: 0;
                height: 0;
                border-bottom: 200px solid red;
                /* border-top: 200px solid green; */
                border-left: 200px solid white;
                border-right: 200px solid white;
            }

     

     

    如果每一条边都存在,有颜色。

     #box {
                width: 0;
                height: 0;
                border-bottom: 200px solid red;
                border-top: 200px solid green;
                border-left: 200px solid pink;
                border-right: 200px solid black;
            }

     

    展开全文
  • css三角形、居中、圣杯布局
  • CSS三角形

    2021-09-07 09:07:01
    一、css三角形的原理 将一个div的宽度和高度设置为0,然后设置边框样式 .triangle{ width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid blue; border-bottom: 100px solid orange; ...

    一、css三角形的原理

    将一个div的宽度和高度设置为0,然后设置边框样式

    .triangle{
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid blue;
        border-bottom: 100px solid orange;
        border-left: 100px solid green;
    }
    

    得到一个由四个三角形组合形成的正方形

    将对应位置的边框颜色设置为透明transparent,就会形成三角形

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

    规律:三角形指向的反方向的颜色设置为你想要的,其他方向设置为transperent透明。比如你想要一个三角形,且方向指向右边,那么将三角形指向的反方向也就是border-left设置为不透明的颜色,其他边框方向设置为透明,就可以得到。因为边框实际就是正方形的四条边框。

    三角形指向的反方向不好记忆,推荐使用原理(四个三角形组合形成的正方形)来记忆。

    .triangle-right {
    	width: 0;
    	height: 0;
    	border-top: 100px solid transparent;
    	border-right: 100px solid transparent;
    	border-bottom: 100px solid transparent;
    	border-left: 100px solid blue;
    }
    /* 推荐以下简洁的写法,全部设置为透明,在单独设置某一方向的边框颜色 */
    .triangle-right {
    	width: 0;
    	height: 0;
    	border: 100px solid transparent;
    	border-left-color: blue;	/* 设置正方形左边框颜色不为透明 */
    }
    

    弊端:以上的写法,三角形实际占据的还是一个正方形

    解决办法:三角形指向的方向不设置边框

    .triangle-right {
    	width: 0;
    	height: 0;
    	border: 100px solid transparent;
    	border-left-color: blue;
    	border-right: none;
    }
    

    二、补充

    .triangle{
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid blue;
        border-bottom: 100px solid orange;
        border-left: 100px solid green;
    }
    

    我们将上述正方形的蓝色块和橘色块设置为透明

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

    我们将他们设置为同一种颜色

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

    规律:相当于在正方形中左上角的三角形,我们只需给左边框和上边框设置颜色,其他边框设置透明。比如我们需要一个右下角的三角形,只需要给右边框和下边框设置颜色。该三角形不会占据多余空间,可以采用简洁的写法。

    .triangle-right-down {
    	width: 0;
    	height: 0;
    	border: 100px solid transparent;
    	border-right-color: blue;
    	border-bottom-color: blue;
    } 
    

    以上都是等腰三角形。如果我们想要其他类型的三角形呢?道理是一样的,给边框设置不同的宽度即可。

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

    我们还可以配合旋转,翻转等css属性得到更多类型的三角形。另外还可以使用两个三角形重叠位置偏移形成三角形边框或者阴影。

    展开全文
  • 为了提高前端开发效率, 笔者先后写了上百个前端工具, 有些是给公司内部使用的, 有些单纯是因为自己太“懒”, 不想写代码, 所以才“被迫”做的. 接下来介绍的一款工具——css三角形...

    为了提高 前端开发 效率, 笔者先后写了上百个前端工具, 有些是给公司内部使用的, 有些单纯是因为自己太“”, 不想写代码, 所以才“被迫”做的. 接下来介绍的一款工具——css三角形生成器也是因为之前想要解放设计师的生产力, 自己又懒得切图或者写css代码, 所以想来想去还是自己做一个能自动生成css三角形代码的工具吧.

    接下来笔者就来带大家介绍一下这个工具的用途和实现方案, 方便大家后续可以扩展出更多的“懒人工具”.

    在线css三角形生成器预览

    由预览动画我们可以看到通过在线工具我们可以轻松配置各种想要的三角形, 并且能实时查看css代码. 开发完这个工具之后笔者再也不用担心还需要手写三角形代码了. (上班摸鱼也成了可能, 确实很多时候就是不想写代码还想要有钱拿) 在文末笔者会附上css工具的在线地址, 接下来我们来看看具体实现流程.

    实现css三角形生成器

    因为这个工具的需求来自于前端, 所以肯定是要对cssjs编程有一定的基础, 比如css3的 transformtransition, 布局, 盒模型, border边界特性等.

    和笔者之前写的任何一个开源工具一样, 在开发项目前一定要明确需求和目标, 这里笔者简单整理一下需求:

    • 生成任何大小的三角形(size)

    • 生成不同位置的三角形(direction)

    • 生成不同角度的三角形(rotate)

    • 生成不同背景色的三角形(color, 其实这个实不实现无所谓, 主要是笔者连这个代码都懒的写)

    了解需求之后我们可以大致画一个简单的原型图来代表我们的css生成器界面, 如下:

    有了原型图, 我们可以得到如下的任务细分图:

    这里笔者要提的一点是其实以上流程对于任何项目都适用, 包括你遇到的难解的问题, 都可以一步步把思路先理清楚, 把大目标拆解为一块块的小目标, 然后逐个击破, 这样大难题也就解决了.

    接下来我们先分析一下用css实现三角形的原理.

    1.css画三角形的原理

    其实笔者在之前的文章中也分享过3种以上的使用css实现三角形的方案, 这里笔者介绍一个通用的方法, 也就是用border来实现三角形, 我们先来看下面的图示:

    以上是展示了当box元素的width小于自身border宽度时的样子以及当box宽度为零而border-width不为零时的样子. 通过图形一分析是不是很容易联想到如果我只要一个边有颜色,其他都为透明面是不是就能变成三角形了呢?

    的确也是这么实现的, 知道这个原理之后我们来继续往下实现所见即所得的“三角形”.

    2.编辑器实现

    编辑器实现也是前端老生长谈的话题了, 笔者在H5-Dooring项目中写过一个非常复杂的编辑器, 但是这里我们只要需要一个静态且简单的编辑器就够了. 如下图的界面:

    我们可以用任何我们擅长的框架和组件库来实现, 比如·vue3+ element plusreact + antd4.0, 笔者这里采用react方案实现, 颜色选择器采用社区比较有名的react-color.

    编辑器界面的代码笔者就不一一介绍了, 相信大家都能实现, 我们这里来说一下样式数据共享逻辑:

    我们要想保证预览区域和css代码预览区域能随表单值变化而实时变化, 这里一定要将表单数据共享出来, 我们可以用react组件的state或者vuevuex(虽然不用vuex也可以将data提升)来共享状态.

    3. 预览区域实现

    预览区域实现其实有了以上的分析其实很好实现了, 只需要利用共享的form数据来绑定到三角形元素的样式上即可. 画布的背景这里笔者也是用css实现的, 如下图:

    感兴趣可以cv一下, 这代码如下:

    .previewArea {
      display: inline-block;
      width: 360px;
      height: 360px;
      background: #eee;
      background-image: linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0),
                      linear-gradient(45deg,rgba(0,0,0,.2) 25%, transparent 0, transparent 75%, rgba(0,0,0,.2) 0);
      background-size: 30px 30px;
      background-position: 0 0,15px 15px;
    }
    

    还有一个比较关键的一点是如何实现切换三角形的方向的问题, 我们都知道切换方向后cssborder的几个方向属性都会变, 比如三角形的方向向上时, 我们的css如下:

    {
      border-width: 0 60px 60px 100px;
      border-color: transparent transparent #06c transparent;
    }
    

    三角形的方向向下时, 我们的css如下:

    {
      border-width: 100px 60px 0 60px;
      border-color: #06c transparent transparent transparent;
    }
    

    同样左右也是类似的, 所以我们要维护4中样式, 如果后期想加一下左上, 右上, 左下, 右下, 这样代码会非常难以维护(不是if else就是switch, 说实话switch只适合8个条件一下的判断), 所以笔者这里用对象法来解决它, 并将其封装成一个函数:

    const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) => {
        const borderWidthAndColor:any = {
          '1': {
            borderWidth: `0 ${w/2}px ${h}px ${w/2}px`,
            borderColor:`transparent transparent ${color} transparent`
          },
          '2': {
            borderWidth: `${h}px ${w/2}px 0 ${w/2}px`,
            borderColor:`${color} transparent transparent transparent`
          },
          '3': {
            borderWidth: `${h/2}px ${w}px ${h/2}px 0`,
            borderColor:`transparent ${color} transparent transparent`
          },
          '4': {
            borderWidth: `${h/2}px 0 ${h/2}px ${w}px`,
            borderColor:`transparent transparent transparent ${color}`
          }
        }
        return borderWidthAndColor[direction]
      }
    

    其实属性预览比如宽度, 高度, 背景色这些都好处理, 笔者这里就不一一介绍了. 预览如下:

    4. 代码实时展示实现

    至于代码实时展示在文本框中, 这个也是很容易实现, 我们只要要把拿到的数据实时展示到文本框里即可. 由于笔者采用的css module 和react方式实现的, 所以需要对css进行额外处理, 比如将对象格式转化为css规范的格式, 所以需要加如下步骤:

    JSON.stringify(triangleCss, null, 4).replaceAll(/"/g, '').replaceAll(/,/g, ';')
    

    这样, 一个css三角形生成器就做好了, 大家还可以在此基础上继续扩展, 比如支持多边形, 六角形, ⭐五角形等, 也是完全没问题的.

    在线体验地址: 在线css三角形生成器

    最近H5编辑器H5-Dooring也做了大量更新和优化, 感兴趣的也可以学习研究.

    轻松一刻

    觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!微信搜 “趣谈前端”,发现更多有趣的H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战.

    展开全文
  • 接下来介绍的一款工具——css三角形生成器也是因为之前想要解放设计师的生产力, 自己又懒得切图或者写css代码, 所以想来想去还是自己做一个能自动生成css三角形代码的工具吧. 接下来笔者就来带大家介绍一下这个工具...
  • 三角形我们经常用在列表、下拉提示、面包屑导航的位置,给用户以导向的引导作用,比如,在有下拉列表的地方,我们可以用向下的箭头,在列表的时候,我们能告诉用户每个列表项和下一个列表项的关系,当在面包屑导航中...
  • 一、效果图 二、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>... border-right: 70px solid transpa
  • 慕姐8265434我找到了适用于任何宽度/高度的解决方案。您可以在linear-gradient背景中使用两个伪元素,例如(fiddle):.btn { position: relative; display: inline-block; width: 100px; height: 50px;...
  • 前端开发中两个很不错的小技巧, CSS三角形与圆角背景.
  • 效果: wxml: <view class="productStatus"> <span> <em>VIP</em> </span> </view> wxss: .productStatus { position: absolute;... height: 1.81
  • <style> #Arrow{ width: 0px; height: 0px; border: 40px solid; border-color: transparent transparent red transparent; transition:0.5s; transform: translate(0, -50%); } ... t
  • 先看一下效果图: 点击后--> <style> .triangle { width: 0; height: 0; border: 5px solid transparent; display: inline-block; } .tri-b { border-bottom: 0;... border-top: 8px soli...
  • CSS三角形生成器 CSS利用border生成三角形原理图
  • 1、新建一个元素,随便什么元素,不过我习惯性的会用块元素来做。如果行内元素就display:block它。...到这里就很清晰了,只要把想要的保留,其它的设置为透明就可以达到三角形的效果,那么:border:5
  • css 三角形案例

    2022-06-13 22:08:21
    导航栏设置 三角
  • <div class="triangle"></div> .triangle { height: 0; width: 0; border: 50px solid #fff; border-bottom: 50px solid red; } 效果图: 实际应用:(模仿 apple 购物....small-b-menu-triangle {
  • CSS写带边框的三角形

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,212
精华内容 8,084
关键字:

css三角形