我真的很喜欢在branch.com，例如arrowboxes：http://tinyurl.com/lw5zlhu CSS3箭头框状branch.com

怎样才能创建arrowboxes与像branch.com一个时间表？

我已经这样做了这么票价：http://jsfiddle.net/uFPEf/6/

HTML

<div class="item"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur adipiscing dignissim purus at adipiscing. 
    </p> 
</div> 
<div class="timeline"> 
    <div class="line"></div> 
</div> 
<div class="item"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur adipiscing dignissim purus at adipiscing. 
    </p> 
</div> 
<div class="timeline"> 
    <div class="line"></div> 
</div> 
<div class="item"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Curabitur adipiscing dignissim purus at adipiscing. 
    </p> 
</div>

CSS

body { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", 
    "Helvetica Neue", Helvetica, Arial, "Lucida Grande", 
    sans-serif; 
    font-weight: 300; 
    padding:20px; 
} 
.item{ 
    border-radius:3px; 
    padding:10px; 
    border: solid 1px #EEEEEE; 
} 
.item p { 
    color:#333333; 
    padding:20px; 
} 

.timeline { 
    width: 100%; 
} 

.line { 
    background: #EEEEEE; 
    height: 50px; 
    margin: 0 auto; 
    width: 2px; 
}

来源

2013-07-23 SHUMAcupcake

那么，他们使用的图片 – Chad

我知道他们使用的图片，但是这仍然是可能的CSS3 – SHUMAcupcake

是的，我会用它来支持你。 – Chad

可以前后元素后使用CSS”。如果您直接在绝对定位的目标位置进行定位，并给出白色背景，则可以对其进行仿真。

.item:before { 
    position: absolute; 
    top: -11px; 
    left: 50px; 
    -webkit-transform: rotate(45deg); 
    height: 20px; 
    width: 20px; 
    background: #fff; 
    border-top: 1px solid #aaa; 
    border-left: 1px solid #aaa; 
    content: ''; 
} 
.item:after { 
    position: absolute; 
    bottom: -11px; 
    left: 50px; 
    -webkit-transform: rotate(45deg); 
    height: 20px; 
    width: 20px; 
    background: #fff; 
    border-top: 1px solid #aaa; 
    border-left: 1px solid #aaa; 
    content: ''; 
}

http://jsfiddle.net/uFPEf/7/

来源

2013-07-24 00:04:55 Chad

不错，但是如果你想要一个只有一个箭头在底部，其余的有两个箭头就像你现在拥有的顶部和底部。你能提供那个吗？你会使用哪些浏览器？ – SHUMAcupcake

我不完全确定你在问什么，但为什么不自己尝试呢？我给了你一个合作的基本模型。如果你正在编写一个网站，这应该给你一个关于如何完成你想要做的事情的基本理解。 – Chad

是的，你说得对。但是你知道哪些浏览器支持这个吗？ =） – SHUMAcupcake

这里是一个纯CSS解决方案它可能是更好的，虽然使用的图像。

HTML：

<div id="box"></div>

CSS：

#box{ 
    width:200px; 
    height:200px; 
    background:#EEE; 
    box-shadow: 0px 0px 2px #999; 
    margin:50px; 
    position:relative; /* This makes sure the ::after is absolute to this element */ 
} 

#box:after{ 
    content:''; /* Content is required on all ::before & ::after */ 
    width:22px; 
    height:22px; 
    background:#FFF; 
    border-top: 1px solid #C2C1C1; /* 3D'ish effect */ 
    border-left:1px solid #C2C1C1; 
    position:absolute; 
    bottom:-12px; /* Half the height of the square */ 
    left:15px; 
    -webkit-transform: rotate(45deg); /* rotate 45deg to fake a triangle */ 
}

Demo

来源

2013-07-24 00:07:11 iConnor

CSS3箭头框状branch.com

回答

Demo

相关问题