CSS实现无图片带箭头的DIV方框

最新推荐文章于 2022-05-25 10:21:13 发布
最新推荐文章于 2022-05-25 10:21:13 发布
阅读量816 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k678mh/article/details/10200039
版权

<html>

<head>
<title>纯CSS无图片带箭头的DIV方框</title>
<style>
div.container{position:absolute;
top:30px;
left:40px;
font-size: 9pt;
display:block;
height:100px;
width:200px;
background-color:transparent;
*border:1px solid #666;
}
s{
position:absolute;
top:-20px;
*top:-22px;
left:20px;
display:block;
height:0;
width:0;
font-size: 0; 
line-height: 0;
border-color:transparent transparent #666 transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
i{position:absolute;
top:-9px;
*top:-9px;
left:-10px;
display:block;
height:0;
width:0;
font-size: 0;
line-height: 0;
border-color:transparent transparent #fff transparent;
border-style:dashed dashed solid dashed;
border-width:10px;
}
.content{
border:1px solid #666;
-moz-border-radius:3px;
-webkit-border-radius:3px;
position:absolute;
background-color:#fff;
width:100%;
height:100%;
padding:5px;
*top:-2px;
*border-top:1px solid #666;
*border-top:1px solid #666;
*border-left:none;
*border-right:none;
*height:102px;
box-shadow: 3px 3px 4px #999;
-moz-box-shadow: 3px 3px 4px #999;
-webkit-box-shadow: 3px 3px 4px #999;
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')"; 
}
</style>
</head>
<body>
<div class="container">
<div class="content"><br>这是框中的文字，可动态显示。高度自动增加，应该不错吧^_^</div>
<s>
<i></i>
</s>
</div>
</body>
</html>
k678mh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css简单实现带箭头的边框
web前端开发教程htmlcssjs
11-25 2351
实现一个普通边框 <style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div...
CSS实现带箭头的提示框
kkkkk0826的专栏
10-14 334
我们在很多UI框架中看到带箭头的提示框，感觉挺漂亮，但是之前一直不知道其原理，今天网上找了些资料算是弄清楚原理了； 先上效果图： 原理分析： 上面的箭头有没有觉得很像一个三角形，是的，它就是三角形；只不过它这个尖角是通过两个三角形来实现的； 首先新建一个div，画出提示框的轮廓 <div class="demo"></div> 给定样式： ...
纯CSS无图片带箭头的DIV方框
08-09
纯CSS无图片带箭头的DIV方框
CSS 实现箭头、三角形、旋转的正方体
花铛
03-13 1570
代码】CSS实现箭头、三角形、旋转的正方体。
css实现方块箭头
qq819564594的博客
06-02 451
[code="java"] .box{ background-color:#ff0; margin:0 auto; margin-top:100px; height: 300px; width: 300px; position: relative; } .arrow { border-color: transparent transparent #794C...
css带边框的箭头对话框
北梦啊的博客
05-25 1537
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
CSS实现带箭头的DIV方框
06-09
CSS实现带箭头的DIV方框
css 提示框 CSS实现带箭头的DIV提示框
12-13
如下： 具体代码实现如下： CSS： 复制代码代码如下: .rhsyyhqDIV{ position:absolute; top:555px; left:200px; font-size: 9pt; display:block; height:335px; width:405px; background-color:transparent; ...
div+css布局制作横向带箭头步骤流程样式
11-08
`div+css`布局能够实现灵活、可维护的网页设计，对于创建横向带箭头的步骤流程展示尤为适用。以下是制作此类布局的具体步骤和相关知识点： 1. **创建HTML结构**：首先，我们需要用`<div>`元素来表示每个步骤，每个...
css制作带箭头的css边框
05-08
css+html制作带箭头的css边框,不用背景图片的带箭头的边框。
css实现带箭头和圆点的轮播
09-22
主要介绍了css实现带箭头和圆点的轮播的相关资料,当鼠标移入图片、圆点和方向键时，停止轮播，移除恢复。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS无图片带箭头的DIV方框
学习笔记
05-25 779
<br /><html><br /> <head><br /> <title>纯CSS无图片带箭头的DIV方框</title><br /> <style><br /> div.container{position:absolute;<br /> top:30px;<br /> left:40px;<br /> font-size: 9pt;<br /> display:block;<br /> height:100px;<br /> width:200px;<br /> backgro
制作带箭头html css,html – 使用css3创建具有css箭头的框
weixin_39719427的博客
06-20 119
.box {position: relative;margin: 18px;width: 8em;height: 6em;border: 1px solid rgb(77, 77, 77);color: #FF1919;background-color: pink;}.box:hover {width: 8em;margin: 18px;}.box:before {content: '';posi...
CSS3 4个带方向箭头的标注框
rockllee的博客
03-20 2080
html:&lt;script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;div style="width:100%;overflow:hidden;background-color:#FFF;"&gt; &lt;h1 class="title-style t...
CSS带箭头的提示框实现
梦否
04-07 2898
Abstract     在使用markdown编辑器写博客的时候，发现了这个提示框很好看，如下图： 图一：带箭头提示框图 图二：普通提示框     下面就来依次实现一下。 2. Related Data     在参考一的文章中介绍了CSS实现带箭头的提示框[1]。箭头的设计在这里其实有三种可行方案： 考虑使用图片作为顶部的三角的背景； 考虑使用SVG来绘制顶部的三角图形； 纯粹的依靠...
html图片无边框,纯CSS实现无图片带箭头的DIV方框
weixin_34725745的博客
06-09 418
用CSS来制作无图片带箭头的DIV方框(此代码比较适合追求纯代码者)这类效果也可以用图片背景来实现，代码会更简洁CSS代码：div.container{position:absolute;top:30px;left:40px;font-size: 9pt;display:block;height:100px;width:200px;background-color:transparent;*bor...
html5方框的箭头怎么弄,纯CSS-带箭头的DIV方框
weixin_39566387的博客
06-09 488
纯CSS无图片带箭头的DIV方框div.container{position:absolute;top:34px;left:50px;font-size: 9pt;display:block;height:100px;width:200px;background-color:transparent;*border:1px solid #666;}s{position:absolute;top:-2...
css绘制带箭头对话框
.
02-17 8861
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <style> .tip { position: relative; background-color: deepskyblue; margin
css实现带箭头的方框
最新发布
01-18
要实现带箭头的方框，可以使用CSS的伪元素和定位属性来实现。 首先，可以创建一个带有箭头的方框的容器元素，例如一个div元素。给这个容器元素设置合适的宽度、高度、背景颜色和边框样式，可以使用border属性来设置。 接下来，使用CSS的伪元素before或after来创建一个三角形的箭头。通过调整伪元素的宽度、高度、边框样式和背景颜色来绘制一个三角形。可以使用border-width属性来设置三角形的大小，使用border-color属性来设置边框颜色。 为了使箭头和方框对齐，可以使用CSS的定位属性来进行调整。可以将容器元素设置为相对定位（position: relative），然后将伪元素设置为绝对定位（position: absolute），并使用top、left、right、bottom属性来调整箭头的位置。 例如，下面是一个实现带箭头的方框的CSS代码示例： ```css .box { position: relative; width: 200px; height: 100px; background-color: #f2f2f2; border: 1px solid #ccc; } .box::before { content: ''; position: absolute; top: 50%; right: -10px; /* 调整箭头的位置 */ margin-top: -5px; width: 0; height: 0; border-style: solid; border-width: 5px; border-color: transparent transparent transparent #f2f2f2; } ``` 通过调整容器元素和箭头的尺寸、位置、颜色等属性，可以实现不同样式的带箭头的方框。这个方法可以用于实现提示框、弹出框等效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值