当前位置： 首页 > Web前端 > CSS

CSStricks-border+transparent

时间：2023-03-30 18:27:15 CSS

简介出门忘了带电源线，等快递到了终于可以继续文章了。终于拿到面试机会了，面试官人很好，可惜我当时一头雾水，错过了一个很好的机会：面试官：Barbara...我：嗯，啊，这个，那个（吱吱）……面试官：你会画三角形吗？我：我主要用到border和transparent这两个属性。将其余的边设置为透明，然后将相应的方向设置为需要的颜色。一般多采用等边、等腰的装饰。面试官：那你知道不等边三角形怎么写吗？我：不就是这么写的（陷入迷茫状态），然后赶紧说要用伪元素来模拟吗？面试官：可以单独设置高度。我：...效果展示：例子源码，在线例子三角形原理可以通过图形展示更清楚的展示区别：1.简单的正方形代码：

$square-size=100px.squarewidth$square-sizeheight$square-sizeborder5pxsolidborder-color#893615#E76B56#A72310#0C1F22效果图：加强效果：$square-size=100px$border-size=60px.squarewidth$square-sizeheight$square-sizeborder$border-sizesolidborder-color#893615#E76B56#A72310#0C1F22你可以清楚地看到每一边都是一个梯形。2、勾选正方形，打开控制台：可以看到中间的空白就是我们设置的100*100，这是我们的盒模型（box-sizing）为content-box的结果。然后我们设置为border-box，查看结果：从border-box看，由于两边border的大小都是60，所以60*2=120>100，里面的宽度是0。3.正方形defaultboxmodel的上文已经说明，当正方形的尺寸被压缩为0时，会得到一个三角形的效果。然后在此处使用默认框模型创建一个三角形：$square-size=0$border-size=60px.squarewidth$square-sizeheight$square-sizeborder$border-sizesolidborder-color#893615#E76B56#A72310#0C1F224。隐藏不必要的边缘最后，生成三角形（保留目标相反方向的颜色），仅举几个例子。三角形打开角度向上：$square-size=0$border-size=60px.trianglewidth$square-sizeheight$square-sizeborder$border-sizesolidtransparentborder-bottom-color#A72310三角形打开角度向右：$square-size=0$border-size=60px.trianglewidth$square-sizeheight$square-sizeborder$border-sizesolidtransparentborder-left-color#0C1F22三角形向左上角张开的角度：$square-size=0$border-size=60px.trianglewidth$square-sizeheight$square-sizeborder$border-sizesolidtransparentborder-left-color#0C1F22border-top-color#893615三角形生成器必须考虑如何每次写三角形都很麻烦，将它们可视化并一次创建一个三角形，只需单击一下就很棒。友情提示：以下参考链接参考Vue相关概念0.基本结构settings_direction">三角形方向三角形类型三角形颜色

效果图

代码

.generate-triangledisplayflex.titlemargin0padding0.settingsflex-basis30%.exhibitionflexautobackground-color#cdd1d3//silverfishwhite.settingsdisplayflexflex-directioncolumnpadding-top12px.settings_direction,.settings_type,.settings_color显示flexjustify-contentcenter.settings_type,.settings_colorflex-basis20%.settings_directionflexauto.exhibition显示flexflex-directioncolumnpadding-top12px.rendering,.code显示centerflexcontentcodejustifyerflex-basis35%.renderingflexautorendering:1.Directionselection开始写三角形的时候，需要确定三角形的方向，比如up，down，或者uptotheleft这时候我们需要一个点击的子组件来触发效果：
导出默认值{name:"triangle-direction",data:()=>{return{active:"oblique0",directions:[{name:"oblique",single:["top","right","bottom","}left"]},{name:"positive",single:["top-left","top-right","bottom-right","bottom-left"]}]};},mounted(){这个。changeDirection("top","oblique0");},方法:{changeDirection(val,index){this.active=in敏捷；this.$emit("getDirection",val);}}};效果图：2.类型选择这里三角形分为等边三角形、等腰三角形、不等边三角形三种类型选择组件依赖方向组件，需要校验传入的值，不同的值会有不同的输出结果。如上所述，斜三角形由两个边框组成，因此该类型不会提供等边形式：{{type.zh}}
exportdefault{name:"triangle-type",data:()=>{return{active:0,equilateral:false,triangleTypes:[{en:"equilateral",zh:"equilateral"},{en:"isosceles",zh:"isosceles"},{en:"scalene",zh:"Scale"}]};},props:{type:{type:String,validator:function(val){return["top","right","left","bottom","top-left","top-right","左下角”，“右下角”].includes(val);}}},watch:{type:{handler:function(val){constisPositive=["top","right","left","bottom"].包括（值）；这。等边=正；if(isPositive){this.changeType('等边',0);}else{this.changeType('isosceles',1);}},立即:true}},方法:{changeType(item,index){this.active=index;this.$emit("getType",item);}}};效果图：3.颜色选择现在input提供了type="color"的选项，做一个颜色选择器还是很简单的。对于输入，你可以使用前面提到的CSS技巧：checkbox+label+selector来隐藏它：{{color}}exportdefault{name:'color-picker',data:()=>{return{color:'#000000'}},mounted(){this.changeColor();},方法：{changeColor(){this.$emit('getColor',this.color);}}}效果图：4.初步效果图依靠三个数据：方向，类型，颜色，依次适配这三者。首先，方向和颜色是问题。初步看一下效果图：5.宽高的选择在原理中有说明。三角形实际上是由隐藏其余边框的矩形形成的。以等边三角形为例：如果需要边长为50px的三角形，根据勾股定理即可得到：border-width:028.87px50px;exportdefault{name:"triangle-width",props:{类型:{type:String,validator:function(val){return["equilateral","isosceles","scalene"].包括（瓦尔）；}},direction:{type:String,validator:function(val){return[“top”,“right”,“left”,“bottom”,“top-left”,“top-right”,“bottom-左”，“右下”].includes(val);}}},data:()=>{return{bottom:50,sideOne:50,sideTwo:50,borderWidth:'',isPositive:false};},watch:{direction:{handler:function(val){this.isPositive=["top","right","left","bottom"].includes(val)this.getBorder();},immediate:true},type:{handler:function(){this.getBorder();}}},方法：{getBorder(){letdirection=this.direction;让type=this.type;switch(type){case'equilateral':this.calcEquBorder(direction);休息;案例'等腰'：this.calcIsoBorder（方向）;休息;case'scalene':this.calcScaBorder(方向);休息;默认值：中断；}this.$emit('getBorderWidth',this.borderWidth);},calcEquBorder(direction){让bottom=this.底部;让height=(bottom/Math.sqrt(3)).toFixed(2);开关（方向）{case'top':this.borderWidth=`0${height}px${bottom}px`;休息;case'right':this.borderWidth=`${height}px0${height}px${bottom}px`;休息;case'bottom':this.borderWidth=`${bottom}px${height}px0`;休息;case'left':this.borderWidth=`${height}px${bottom}px${height}px0`;休息;默认值：中断；}},}};.最后，到了生成代码的最后一步。有很多方法可以生成代码。您可以处理并输出从子组件传来的数据。这里有一个比较取巧的形式，因为这里使用了内联样式，所以可以直接在它的DOM上Get。exportdefault{methods:{postCode(){this.$nextTick(()=>{letdom=this.$refs.triangleRendering;letcode=dom.attributes.style.textContent;this.$emit('getCode',code);})}}}exportdefault{name:'triangle-code',道具：{代码：{类型：字符串，要求：真}}，观看：{代码：{处理程序：函数（代码）{this.handleCode（代码）;},立即:true}},数据:()=>{return{copyCode:''}},方法:{handleCode(code){code=code.replace(/\;/g,";\n");this.copyCode=`width:0;\nheight:0;\nborder:solidtransparent;\n${code}`;}}}渲染图：最后的步骤只是思路，具体请查看项目源码，调试过程中难免会做一些修改。面试前还是要把面试的问题写下来，不然真的很容易糊涂。。。

CSStricks-border+transparent相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。