是否可以用带边框的透明容器创建箭头？
bra*_*r19 13 html javascript css
有可能创建这样的东西:
因为现在我有这样的东西:https: //jsfiddle.net/38kjb5us/
<div class="dropdown-content"></div>
body{
background-image: url('//ssl.gstatic.com/gb/images/v1_76783e20.png');
}
.dropdown-content{
display: inline-block;
padding: 18px 14px;
border: 1px solid #ffffff;
min-width: 160px;
position: relative;
box-shadow: 0 0 10px #000000;
margin: 15px;
}
.dropdown-content:before{
position: absolute;
content: "";
border: 1px solid #ffffff;
width: 0;
height: 0;
border-style: solid;
border-width: 0 12px 12px 12px;
border-color: transparent transparent #ffffff transparent;
top: -12px;
}
我不知道如何在透明容器中添加带边框的箭头(((
可能吗？如果是,那怎么样？
Taw*_*wah 10
仅使用DIV和Css检查此解决方案
您可以在下面的解决方案中更改箭头容器的宽度,高度和位置
https://plnkr.co/edit/nXRNr7bbdMSaxBKa6h4J?p=preview
和这个codepen添加阴影 http://codepen.io/tawfiqin/pen/JKYyMK
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div class="image-cont">
<div class="arrow-container">
<div class="arrow"></div>
<div class="top-border"></div>
<div class="bottom-section"></div>
<div><h2 style="margin-left:10px;">your content</h2></div>
</div>
<div class="arrow-container cont2">
<div class="arrow"></div>
<div class="top-border"></div>
<div class="bottom-section"></div>
<div class="arrow-content">
<h2 style="margin-left:10px;">your content</h2>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="arrow-container cont3">
<div class="arrow"></div>
<div class="top-border"></div>
<div class="bottom-section"></div>
<div class="arrow-content">
<h2 style="margin-left:10px;">Dynamic Width</h2>
<p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
</div>
</body>
</html>
和css代码
/* Styles go here */
.image-cont{
height:400px;
background:red;
background:url('https://mir-s3-cdn-cf.behance.net/project_modules/hd/94430a33978280.56bf480f1ad36.jpg');
}
.arrow-container{
position:absolute;
width:360px;
height:170px;
background:rgba(255,255,255,0.0);
top:140px;
left:160px;
color:white;
}
.arrow-content{
height:100%;
overflow:auto;
background:rgba(255,255,255,0.0);
}
.arrow{
position:absolute;
width:30px;
height:30px;
border-left:1px solid white;
border-top:1px solid white;
transform:rotate(45deg);
top:-15px;
left:40px;
}
.top-border{
position:absolute;
width:calc(100% + 2px) ;
height:1px;
/*Thanks to Ahmad Shadeed @shadeed user at codepen*/
background: linear-gradient(to right, #fff 34px, transparent 0, transparent 76px, #fff 0, #fff 100%);
}
.bottom-section{
width:100%;
border:1px solid white;
border-top:none;
height:100%;
top:1px;
position:absolute;
pointer-events:none;
}
.cont2{
width:200px;
height:100px;
top:350px;
}
.cont3{
width:auto;
max-width:300px;
height:100px;
top:350px;
left:400px;
}
你也可以使用SVG
这是一个超简单的纯CSS解决方案,只有一个div.箭头是使用伪元素:before和:after.
body {
background: url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg') top center no-repeat;
background-size: cover;
padding: 50px;
overflow: visible;
}
.box {
padding: 15px;
color: red;
position: relative;
width: 300px;
height:auto;
max-width: 100%;
margin: 0 auto 30px auto;
background-color: transparent;
border: 1px solid #FFFFFF;
border-top: none;
overflow: visible;
}
.box.second {
width: 100%;
}
.box:before, .box:after {
content:'';
position: absolute;
top: -10px;
background-color: inherit;
padding-top: 10px;
}
.box:before {
width: calc(30% - 12px);;
left: 0px;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-bottom: 1px solid #FFFFFF;
border-right: 3px solid #FFFFFF;
}
.box:after {
width: calc(70% - 12px);;
right: 0px;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-bottom: 1px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
}<div class="box">
This is a transparent box (fixed width) with an transparent arrow (with borders)
</div>
<div class="box second">
This is a transparent (responsive width) box with an transparent arrow (with borders)
</div>请随时改进和编辑我的快速演示,以满足您的需求.
另一种可能性是使用:before,border和background(linear-gradient或一个像素的图像).
p {
margin: 40px 5% auto;
padding: 1em;
border: solid;
color: white;
border-top: none;
position: relative;
background: linear-gradient(white, white) top left no-repeat, linear-gradient(white, white) 100px 0 no-repeat;
background-size: 50px 3px, 100% 3px;
/* background-position and background size are used to set length or position to leave a gap */
}
p:before {
/* the arrow*/
content: '';
position: absolute;
height: 35px;
width: 35px;
border-top: solid;
border-right: solid;
top: 0;
left: 48px;
transform: rotate(-45deg);
transform-origin: 0 0;
}
p+p {
width: 20%;
float:left;
}
p+p+p {
width: 50%;
border-radius: 5px;
}
p+p+p:before {
border-radius: 0 5px;
}
html {
height: 100%;
background: url(http://lorempixel.com/640/480/nature/6) fixed;
background-size: cover
}
body {
min-height: 100%;
background: rgba(0, 0, 0, 0.15);
margin: 0;
padding:5px;
display:table;
}
* {
box-sizing: border-box
}
p:first-of-type {
background-color:rgba(250,250,0,0.25);
box-shadow:-5px 5px 5px -5px ,5px 5px 5px -5px , 50px -50px 5px -50px
}
p:first-of-type:before {
background: linear-gradient(45deg, rgba(0, 0, 0, 0) 50% , rgba(250, 250, 0, 0.25) 50% ) 0 0 no-repeat;
box-shadow: 5px 0 5px -5px black, 0 -5px 5px -5px black;
background-size:38px 32px
}
p:first-of-type:after {
content:'';
position:absolute;
top:0;
left:-3px;
width:60px;
height:20px;
box-shadow:-5px -5px 5px -5px ;
}<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus
enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis
luctus, metus</p>阴影可以添加到主容器和伪,第二个伪需要用于绘制阴影的最后一点.半透明背景甚至可以通过rgba()颜色和gradient片段中的伪第一段添加(或演示中的第3段)
小智 -2
在这里尝试这个演示，我使用了一些代码，我希望它对 html 有帮助
<div class="dropdown-content">
<div class="triangle"></div>
</div>
CSS
.triangle {
position: absolute;
margin: auto;
top: -10px;
left: -160px;
right: 0;
width: 15px;
height: 15px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-ms-transform: rotate(-1355deg);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
https://jsfiddle.net/38kjb5us/1/
- @Glubus它不是正确的答案，因为容器有边框并且没有连接到箭头，箭头和容器需要连接 (4认同)