-4
Q
CSS自定义形状
A
回答
0
这是一个看起来像你需要的形状,你必须做一些边界和变换技巧,你也需要使用:之后和:在选择器之前建立这种形状。
#diamond-shield {
\t width: 0;
\t height: 40;
\t border: 50px solid transparent;
\t border-bottom: 50px solid orange;
\t position: relative;
\t top: -10px;
left: 250px;
transform-origin: 0% 0%;
transform: rotate(82deg)
}
#diamond-shield:after {
\t content: '';
\t position: absolute;
\t left: -50px; top: 50px;
\t width: 0;
\t height: 0;
\t border: 50px solid transparent;
\t border-top: 370px solid orange;
}
#chevron {
position: relative;
text-align: center;
padding: 8px;
top: -9px;
margin-bottom: 6px;
left:164px;
height: 0px;
width: 60px;
transform-origin: 0% 0%;
transform: rotate(-98deg);
}
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: white;
transform: skew(0deg, 44deg);
}
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: white;
transform: skew(0deg, -44deg);
}
<div id="diamond-shield"></div>
<div id="chevron"></div>
而且你可以在这里观看一些例子:https://css-tricks.com/examples/ShapesOfCSS/
+0
哇,非常感谢你@PabloMáximo – sanaa
相关问题
- 1. CSS自定义形状箭头
- 2. 使自定义形状的DIV + CSS HTML
- 3. CSS + HTML自定义形状按钮
- 4. Css自定义形状按钮
- 5. css自定义形状的背景色
- 6. 使用css制作自定义形状
- 7. 使用CSS创建自定义形状
- 8. CSS定义形状椭圆
- 9. 用自定义形状自定义ImageView
- 10. 自定义形状的iframe
- 11. 自定义按钮形状
- 12. UIView与自定义形状
- 13. html5 canvas自定义形状
- 14. 自定义ActionBar形状android
- 15. 自定义形状NSButton
- 16. 自定义形状:Android的
- 17. 作物自定义形状
- 18. InkAnalyzer UWP - 自定义形状
- 19. UIViewController.view.superview自定义形状
- 20. ScatterViewItem自定义形状
- 21. 自定义形状ListView
- 22. WPF自定义形状
- 23. Three.js - 自定义形状?
- 24. SVG自定义圆形状
- 25. Android形状自定义矩形
- 26. 的CSS:菜单悬停创建自定义形状背景图片(平行四边形的形状使用CSS)
- 27. HTML/CSS中的自定义形状文本区
- 28. 跨浏览器自定义形状与css
- 29. 如何在CSS自定义形状上放置文本?
- 30. 如何在html/css中自定义形状的按钮?
@sanna - 欢迎堆栈溢出,请阅读怎么问 - http://stackoverflow.com/help/how-到问。这不是一个代码写作服务,你必须显示你到目前为止尝试过的内容 – micstr
这篇文章中的图像不断变化... – Jer
@sanaa我认为你很困惑,不知道你想问什么? –