CSS制作尖角

最新推荐文章于 2023-11-22 12:00:24 发布
最新推荐文章于 2023-11-22 12:00:24 发布
阅读量766 收藏
点赞数
分类专栏： HTML CSS
HTML 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
CSS
2 篇文章 0 订阅
订阅专栏
1.原理：利用border属性和两个元素的叠加，如下到第三幅是利用border做出了三角形，第四附图又做一个白色的小三角形叠加上去，使造成空心的效果。

css制作尖角

 

            效果：

css制作尖角


2.代码
 <!DOCTYPE html>
<html >
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css制作尖角</title>
</head>
 <style>
body {
 margin:50px 0 0 50px;
}
ul, li {
 padding:0px;
 list-style:none;
 margin:0;
}
div {
 padding:10px;
 border:3px solid #1c7ecf;
 position:relative;
 margin:10px;
 float:left;
 width:150px;
 height:100px;
}
p {
 text-indent:2em;
}
.cusp01, .cusp02 {
 position:absolute;
 display:block;
 height:0px;
}
#left_cusp {
}
#left_cusp .cusp01 {
 left:-12px;
 top:50px;
 border-top:9px solid #fff;
 border-bottom:9px solid #fff;
 border-left:0px;
 border-right:9px solid #1c7ecf;
}
#left_cusp .cusp02 {
 left:6px;
 top:-6px;
 border-top:6px solid #1c7ecf;
 border-bottom:6px solid #1c7ecf;
 border-left:0px;
 border-right:6px solid #fff;
}
#right_cusp {
}
#right_cusp .cusp01 {
 right:-12px;
 top:50px;
 border-top:9px solid #fff;
 border-bottom:9px solid #fff;
 border-right:0px;
 border-left:9px solid #1c7ecf;
}
#right_cusp .cusp02 {
 right:6px;
 top:-6px;
 border-top:6px solid #1c7ecf;
 border-bottom:6px solid #1c7ecf;
 border-right:0px;
 border-left:6px solid #fff;
}
#top_cusp {
}
#top_cusp .cusp01 {
 left:100px;
 top:-12px;
 border-top:0px;
 border-bottom:9px solid #1c7ecf;
 border-right:9px solid #fff;
 border-left:9px solid #fff;
}
#top_cusp .cusp02 {
 left:-6px;
 top:6px;
 border-top:0px;
 border-bottom:6px solid #fff;
 border-right:6px solid #1c7ecf;
 border-left:6px solid #1c7ecf;
}
#bottom_cusp {
}
#bottom_cusp .cusp01 {
 left:100px;
 bottom:-12px;
 border-bottom:0px;
 border-top:9px solid #1c7ecf;
 border-right:9px solid #fff;
 border-left:9px solid #fff;
}
#bottom_cusp .cusp02 {
 left:-6px;
 bottom:6px;
 border-bottom:0px;
 border-top:6px solid #fff;
 border-right:6px solid #1c7ecf;
 border-left:6px solid #1c7ecf;
}
</style>
<body>
<div id="left_cusp">
 <ul>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
 </ul>
 <span class="cusp01"><span class="cusp02"></span></span> </div>
<div id="right_cusp">
 <ul>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
 </ul>
 <span class="cusp01"><span class="cusp02"></span></span> </div>
<div id="top_cusp">
 <ul>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
 </ul>
 <span class="cusp01"><span class="cusp02"></span></span> </div>
<div id="bottom_cusp">
 <ul>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
  <li>ffffffffffffffff</li>
 </ul>
 <span class="cusp01"><span class="cusp02"></span></span> </div>
</body>
 </html>CSS制作尖角
山中小僧
关注
专栏目录
CSS 实现尖角样式
yatsov的博客
03-25 2128
CSS 实现尖角样式 实现思路 实现一个CSS的尖角样式 ，思路为 用两个尖角，我是用的是一个before一个div、将其放到指定的位置，一个小一点作为尖角另外一个大一点作为尖角的border。然后使用position定位以及负的margin将其定位上去即可代码如下。 实现代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
css3如何做 尖角
nk90875的博客
03-02 227
css3做尖角的方法：首先创建一个HTML示例文件；然后确定尖角的位置；最后通过给指定div设置属性为“top:6px;left:-3px;border-top:0px;border-bottom...”来实现尖角效果即可。 本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。 推荐：《css视频教程》 尖角在上面 效果图： 代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2
css 实现一个尖角_纯CSS实现页面的尖角、小三角、不同方向尖角的方法小结
weixin_35950365的博客
12-24 252
效果图：方法一的效果图：方法二的效果图：方法三的效果图：方法1：因为有背景，所有实现起来比较方便，尖角的内部同个颜色就可以不用考虑遮挡问题html:带背景颜色的小三角实现是比较简单的！css#top{position:absolute;width:0px;height:0px;line-height:0px;/*为了防止ie下出现题型*/border-bottom:10pxsolid...
css做尖角,css实现尖角div
weixin_30978239的博客
08-04 696
css实现尖角div尖角在上面效果图：代码：[html]尖角div#top{width:400px;height:250px;border:3px solid; /* 边框宽度为3px */position:relative;}.sp1,.sp2{display:block;height:0px;width:0px;position:absolute;font-size:0;line-heig...
用css样式画尖角
初心
08-06 1624
效果图（百度某年笔试题）： #demo { width: 100px; height: 100px; background-color: #fff; position: relative; border: 2px
css制作的尖角效果网页特效
11-24
"css制作的尖角效果网页特效"是指利用CSS技术来创建具有尖角形状的元素，以实现独特的视觉效果。这种效果常用于卡片、按钮、提示框等界面元素，以增加视觉吸引力和用户体验。 首先，我们要理解CSS的基本语法。CSS由...
css3 微信聊天小尖角,用CSS制作聊天框小尖角、气泡效果
06-08
好的，下面是CSS3实现微信聊天小尖角的具体步骤： 1. 首先，创建一个聊天框的容器。可以使用div元素，并设置其宽度、高度、背景色、边框等样式。 2. 接着，在聊天框容器中创建一个伪元素，用来实现小尖角的效果。...
html中的留言框怎么写,CSS制作留言聊天框中的冒泡尖角效果 纯色+边框技巧教程...
weixin_29617841的博客
05-30 905
前言在前端切图过程中遇到一个制作聊天对话框中的箭头效果，如下图。在我还是一个CSS小白的时候，我都是用一个图片来制作这个冒泡效果的，显得很low，很没气质。教程效果演示以上2种效果是我们常见的样式。原理图样式一：这种比较简单，说一下步骤：1、我们写一个div，写出尺寸和圆角，并且设置position属性。2、用伪类::before来定义一个长宽都是0的形状，然后通过border属性，三边设置透明，...
css实现尖角
LiangRZ
06-02 560
css实现尖角，无需用图片
CSS实现尖角加圆角
05-24
用CSS简单实现尖角和圆角，尖角和圆角组合在一起，DIV实现
css 实现一个尖角_css中尖角的制作实例方法总结
weixin_29466397的博客
01-14 915
经常看到这样的尖角，以前不懂，以为都是用图片做出来的，后来惊奇的发现，原来很多都是用CSS做出来的，既美观又节省资源，真是两全其美啊！那么，用CSS怎么实现这种效果呢？首先，来写一个简单的代码：代码如下:.arrow {width:0;height:0;font-size:0;border:solid 10px #000;}这儿，我们可以得到一个黑色的正方形，其实这是边框组成的，1. 用CSS制作...
css 小尖角,CSS3之尖角标签
weixin_39942037的博客
08-03 850
如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性).运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式.Tag1Tag2Tag3Tag4css主要利用伪元素来实现尖角a{dispaly:inline-block;position:relative;background:#ccc;color:green;line-height...
CSS实现空心的“尖角”
最新发布
sfyjknvcx的博客
11-22 955
大家好，我是南宫，来分享一个昨天解决的问题。把尖头做成空心的。
css尖角
a852028的博客
09-06 158
1 .market-nav-arrow { 2 height: 0; 3 font-size: 0; 4 line-height: 0; 5 border-style: solid; 6 border-width: 7px 0px 7px 7px;...
css制作尖角
小沫呗啦的博客
03-16 604
body { margin: 50px 0 0 50px; } ul,li { padding: 0px; list-style: none; margin: 0; } div { padding: 10px; border: 3px solid #1c7ecf; position: relative; margin: 10px; float: le
纯css实现尖角图形
OoOAriesOoO的博客
04-05 3295
css 实现一个带尖角的正方形 来源：网络整理     时间:2015-2-9 12:28:07     关键词: 本篇文章主要介绍了"css 实现一个带尖角的正方形"，对于HTML教程感兴趣的同学可以参考一下： 前些天在牛课网上看到了一个百度的面试题，题目如下：请用CSS实现如下图的样式，相关尺寸如图示，其中dom结构为：<div id=”demo”>
css尖角框
05-25
CSS尖角框是一种常见的CSS技巧，可以在一个元素的边框上创建尖角或三角形。这种技术通常使用伪元素:before或:after来实现。 下面是一个简单的CSS代码示例，演示如何创建一个向下的三角形： ``` .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #000; } ``` 这段代码创建了一个高为0，宽为0的元素，并使用三个带有不同颜色和宽度的边框来创建一个向下的三角形。您可以使用类似的技术来创建其他形状的尖角框，例如箭头或菱形。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值