我的问题类似于这个问题:Arrow Box with CSS,但我需要对齐多个框css 对话框箭头css 对话框箭头,而不是只对齐一个框。并且仍然可以看到所有盒子上的箭头。
在这个例子中:,我创建了两个向左浮动的箭头框。问题是第一个框上的箭头不可见。
如何使箭头可见?
HTML:
`
`
复制
CSS:
`.arrow {float: left; width: 128px; height: 100px; background-color: #f0f0f0; border: 1px solid #999; position: relative;
}
.arrow:after {content: ''; position: absolute; top: 0px; left: 128px; width: 0; height: 0; border: 50px solid transparent; border-left: 12px solid #f0f0f0;
}
.arrow:before {content: ''; position: absolute; top: 0px; left: 129px; width: 0; height: 0; border: 50px solid transparent; border-left: 12px solid #999; pre>
复制
!
发表评论