我想创建一个像这个图像的自定义形状:
我该怎么办?
我的CSS:
class NlpRuleHelper
{
static final CustomParser parser = new CustomParser();
}
--
public interface NlpRule
...
NlpRule STATE_ABBREVIATED = object ->
{
...
location = NlpRuleHelper.parser.parse(location);
我的HTML文件:
#chevron {
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 60px;
width: 200px; }
#chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 51%;
background: #337AB7;
-webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg); }
#chevron:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50%;
background: #337AB7;
-webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }
但我的结果不是我想要的:
答案 0 :(得分:6)
border-radius
放在父div上以创建两个圆角:before
和:after
稍微向下移动top: 20px
,这样它们就不会在div的顶部突出显示以下是fiddle以下内容:
#chevron {
width: 350px;
height: 100px;
background: #337AB7;
border-radius: 10px 10px 0 0;
position: relative;
}
#chevron:before {
content: '';
position: absolute;
top: 20px;
left: 0;
height: 100%;
width: 51%;
background: #337AB7;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after {
content: '';
position: absolute;
top: 20px;
right: 0;
height: 100%;
width: 50%;
background: #337AB7;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
<div id="chevron"></div>
答案 1 :(得分:2)
您可以跳过CSS并使用svg:
HTML:
<svg preserveAspectRatio="none" width="200px" height="100px">
<polygon points="0,0 200,0 200,80 100,100 0, 80"
style="fill:teal;stroke:rgba(0,0,0,1);stroke-width:0" />
</svg>
请注意,如果你需要对角进行舍入,svg多边形可能会很棘手,因为它们本身并不具有类似于border-radius
的属性。您可以设置stroke-linejoin="round"
,然后调整stroke
宽度属性以调整其舍入量。这适用于实体形状,您可以将笔触颜色设置为与填充相同,或者如果您可以使用不同颜色的边框。
HTML:
<svg width="300" height="200">
<polygon points="10,10 210,10 210,90 110,110 10, 90"
style="fill:teal;stroke:teal;stroke-width:10" stroke-linecap="round" stroke-linejoin="round" />
</svg>
答案 2 :(得分:0)
我认为你想写这个形状
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Example</title>
<style type="text/css">
#chevron{
position: relative;
text-align: center;
padding: 12px;
margin-bottom: 6px;
height: 40px;
width: 200px;
font-size:40px;
color:#FFF;
background:#3794d1;
border-radius: 5px 5px 0 0;
}
#chevron:before{
content: '';
position: absolute;
bottom: -10px;
left: 0;
height: 20px;
width: 50%;
background: #3794d1;
-webkit-transform: skew(0deg, 6deg);
-moz-transform: skew(0deg, 6deg);
-ms-transform: skew(0deg, 6deg);
-o-transform: skew(0deg, 6deg);
transform: skew(0deg, 6deg);
}
#chevron:after{
content: '';
position: absolute;
bottom: -10px;
right: 0;
height: 20px;
width: 50%;
background: #3794d1;
-webkit-transform: skew(0deg, -6deg);
-moz-transform: skew(0deg, -6deg);
-ms-transform: skew(0deg, -6deg);
-o-transform: skew(0deg, -6deg);
transform: skew(0deg, -6deg);
}
</style>
</head>
<body>
<div id="chevron">Welcome</div>
</body>
</html>