Question

我有一个PSD-Layout开发，有一些像“卡片”的东西，我很好奇，如果我能做到没有图像，只有CSS3-Borders。

http://i.imgur.com/NSZYPsh.png（这些框应该如何显示）

“inset”-arrow应该是透明的（因为“cards”后面有一个全屏背景图片）。

我尝试过使用cssarrowplease.com，但无法让它工作，所以我想问一下它是否可行？

如果是的话：怎么样？我在cssarrowplease.com上尝试了几件事（在开发者控制台中），但无法在框中添加多个箭头，透明度也不起作用。

任何帮助表示赞赏！

Answer 1

是的，它应该是可能的。为了获得插入箭头的透明效果，您必须创建一个图像，该图像是从卡片顶部到卡片底部的矩形，从插入箭头的点到右边缘的图像。卡（当插入箭头位于卡的左侧时）。然后，您可以将其与中间卡区域的左侧对齐。这个图像需要是一个png来包含透明度信息。

但请注意，使用css无法自然地获取文本以包裹插入内容。

Answer 2

body{
  background-color:gray;
  padding:20px;
}

<!-- The best solution to this is to build polygons with SVG, like this -->

<svg height="300" width="400">
  <polygon points="0 100,200 100,200 0,0 0,50 50" 
  style="fill:white;stroke:#0c6868;stroke-width:6" />
</svg>

CSS3边框（箭头） - 一个div中“两个”箭头的可能性？

2 个答案: