css中border制作各种形状

最新推荐文章于 2024-07-10 16:05:14 发布

aed77922

最新推荐文章于 2024-07-10 16:05:14 发布

阅读量419

点赞数

原文链接：http://www.cnblogs.com/niuxiaoling/p/7992075.html

版权

css利用border制作各种形状的原理如图：

使用border绘制三角形是什么原理？事实上，宽度相等的border是以45度对接的，如下图:

没有了上border如图所示：

再设置border的宽度为0：

设置border的高度为0：如图

最后设置左右border的颜色为透明，如下图：

贴代码，做个小三角形

<style>
    .border{
        width:0;
        height:0;
        border-bottom:100px solid red;
        border-left:50px solid  transparent;
        border-right:50px solid transparent;
    }
</style>
<body>
     <div class="border"></div>
</body>

看了这个大神的作品，感觉学到了好多。这个是展示的css的另一个属性，clip-path.

https://segmentfault.com/a/1190000010936207

附上其中2个比较有用的链接

1.css利用边框做各种样子

https://css-tricks.com/examples/ShapesOfCSS/

2.利用clip-path做各种形状，类似svg

http://bennettfeely.com/clippy/

转载于:https://www.cnblogs.com/niuxiaoling/p/7992075.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aed77922

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSS border边框（理解网页边框制作）

百赢出品，必属精品

04-25

5464

边框是围绕在元素周围的一条线，可以设置边框的宽度、样式和颜色，用于装饰和分隔元素。border-width（边框宽度）：用于设置边框的宽度，可以是像素、百分比或预定义值（thin、medium、thick）。border-style（边框样式）：指定边框的样式，常见的样式包括 solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。border-color（边框颜色）：设置边框的颜色，可以是具体的颜色值、RGB值、十六进制值等。border（边框简写属性）

DIV+CSS通过border样式制作带箭头提示框效果

09-25

DIV+CSS通过border样式制作带箭头提示框效果，是在前端开发中一个非常实用且美观的设计技巧。...通过以上方法，开发者可以灵活地运用CSS，制作出各种样式和方向的带箭头提示框，来增强网页的互动性和用户的使用体验。

参与评论您还未登录，请先登录后发表或查看评论

【css】用边框border实现各种各样的形状

汪小穆的博客

01-14

1万+

前言：前端性能优化中有一个准则是：能用css实现的图标（图片）就尽量用css去实现，达到减少图片使用的目的，从而减少从服务器请求的资源。该篇就说说怎么用边框border实现各种各样的形状。

CSS【详解】边框 border，边框-圆角 border-radius，边框-填充 border-image，轮廓 outline

最新发布

朝阳39的博客

07-10

2378

template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {< template > < div class = " border-dashed " > 1:1的虚线 </ div > </ template > < style scoped > .border-dashed {

使用css实现四边形实现四角边框

小糖豆

12-01

2941

四边形实现四角边框

css写多边形边框(clip-path)

qq_39273423的博客

04-23

2460

css写多边形边框(clip-path) 效果图 css样式 .box-ticket { padding: 0.1vw 0.1vw 0.1vw 0.1vw; background-color: #3f78c5; clip-path: polygon(0% 0%, 11.7vw 0, 13.7vw 1.5vw, 100% 1.5vw, 100% 100%, 0% 100%); } .left-box-ticket { width: 28vw;

详解CSS3 用border写空心三角箭头 (两种写法)

09-27

在CSS3中，创建空心三角箭头是一个实用的技巧，尤其在构建用户界面或布局时。本篇文章将详细介绍如何利用border属性来实现这一效果，包括两种不同的方法。 ### 第一种写法：利用伪元素 `::before` 或 `::after` 在...

css-border：css实现花里胡哨边框特效

02-09

首先，我们来理解CSS中的`border`属性。`border`是CSS中一个非常基础且重要的属性，用于设置元素的边框。它包含三个部分：宽度（`border-width`）、样式（`border-style`）和颜色（`border-color`）。例如： ```css...

CSS Border高级使用实例分享(三角等形状)

09-25

通过本篇知识点的分享，可以看出，CSS Border不仅限于传统边框的简单应用，而是可以通过一些巧妙的设置，创造出各种富有创意的图形效果。这对于前端设计师来说，无疑提供了一个强大的工具，可以大大丰富网页视觉效果...

纯css制作带三角border篇(兼容所有浏览器)

09-25

本文将重点介绍如何使用`border`属性来制作各种方向的三角形，并确保这些三角形在所有主流浏览器中都能正常显示，包括IE6。首先，我们需要明白，CSS的三角形实际上是由四个边框组成的矩形，但通过巧妙地调整非可见...

css中border属性的特殊用法(实现特殊形状)

02-21

css中border属性的特殊用法(实现特殊形状)-包含代码示例

使用CSS的border属性构建变形边框的方法总结

09-24

border是最常用的用来制作各种各样div边框的CSS属性,这里我们整理了使用CSS的border属性构建变形边框的方法总结,最主要的还是基于三角形的一些图形变换:

css边框border样式

wei_jie_zhang的专栏

02-14

705

1.实线：solid 2.虚线：dashed 3.点线：dotted

[CSS LEARN]Border与多边形

weixin_34032827的博客

02-26

220

Bordercss中的边框属性，是一个复合属性，其具体属性有：border-width: 0 5px 5px 5px;border-style: solid;border-color: transparenttransparent blue transparent;上面的这个属性所定义的一个块元素，在不设置宽高的情况下，渲染出来是什么呢？是一个蓝色朝上边长5px的等边三角形！（视觉上）其中原理很...

书小宅之网页设计CSS3——多边形

qq_36447261的博客

07-28

1074

CSS3绘制三角形和梯形 div的边框属性 border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。只有当这个值不是 none 时边框才可能出现。 1、border-style:dotted solid double dashed; 上边框是点状右边框是实线下边框是双线左边框是虚线 2、border-style:dotted solid double; 上边......

有趣的CSS | css-border特效（转动边框，彩虹边框，渐变边框）和css变量