<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
html - 使用 css 的圆 div 内的细箭头
标签 html css css-shapes
我正在尝试使用 CSS 创建一个细箭头(向右的方向)。
我已经创建了带圆圈的 div，但仍然使用箭头
<div class="circleBase type2"></div>
我已经创建了 fiddle 并附上了引用图片
http://jsfiddle.net/squidraj/c9eyrat6/
任何提示/建议/引用链接都可以。提前致谢。
最佳答案
这是一个使用伪元素的选项，尽管图像或 SVG 可能更可取。
CSS
.circleBase {
border-radius: 50%;
behavior: url(PIE.htc); /* remove if you don't care about IE8 */
overflow: hidden;
box-sizing: border-box;
}
.type2 {
width: 50px;
height: 50px;
background: #ccc;
border: 3px solid #000;
position: relative;
}
.type2:before {
content:"";
position: absolute;
top:0;
right:50%;
width:100%;
height:100%;
border:2px solid white;
transform:rotate(45deg) ;
}
关于html - 使用 css 的圆 div 内的细箭头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26276597/