【发布时间】：2015-06-10 15:04:02
【问题描述】：
.circle {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: yellow;
position: absolute;
z-index: 20;
border: 1px solid #AAAAAA;
box-shadow: 0 0 8px 2px yellow;
}
.roof {
width: 280px;
height: 80px;
background-color: gray;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
left: 0;
z-index: -2;
position: relative;
}
.windscreen {
width: 260px;
height: 75px;
background: rgb(41, 137, 216);
/* Old browsers */
background: -moz-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(10%, rgba(41, 137, 216, 1)), color-stop(22%, rgba(170, 170, 170, 1)), color-stop(35%, rgba(41, 137, 216, 1)), color-stop(50%, rgba(170, 170, 170, 1)), color-stop(65%, rgba(41, 137, 216, 1)), color-stop(78%, rgba(170, 170, 170, 1)), color-stop(90%, rgba(41, 137, 216, 1)), color-stop(100%, rgba(41, 137, 216, 1)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
/* IE10+ */
background: linear-gradient(135deg, rgba(41, 137, 216, 1) 10%, rgba(170, 170, 170, 1) 22%, rgba(41, 137, 216, 1) 35%, rgba(170, 170, 170, 1) 50%, rgba(41, 137, 216, 1) 65%, rgba(170, 170, 170, 1) 78%, rgba(41, 137, 216, 1) 90%, rgba(41, 137, 216, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#2989d8', endColorstr='#2989d8', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
margin-left: 10px;
box-shadow: inset 0 0 0 2px #000;
/*not sure of this*/
}
.roof-bonnet {
height: 320px;
margin-top: -100px;
}
#numberplate {
height: 40px;
width: 190px;
background-color: white;
bottom: 10px;
position: relative;
margin-top: -45px;
margin-left: 44px;
border: 2px solid black;
font-size: auto;
text-align: center;
}
.circle-headlight {
margin-top: -55px;
background-color: white;
box-shadow: 0 0 8px 2px white;
}
.right-headlight {
margin-left: 238px;
}<div class="circle"></div>
<div class="circle" style="margin-left:240px;"></div>
<div class="roof"></div>
<div class="windscreen"></div>
<div class="roof roof-bonnet"></div>
<div class="circle circle-headlight"></div>
<div class="circle circle-headlight right-headlight"></div>
<div id="numberplate">REG PLATE</div>我一直在尝试用 CSS 生成卡车/卡车，但在生成侧后视镜时遇到了一些困难，我认为主要是因为我对 position 的设计/使用不当。
我目前有上面的代码，它生成了基本的卡车形状（并不完整）。
我想添加如下内容：
+-------+
| | \
| | |
| /| |
| //| |
| // | |
| // /| |
| // //| |
| // // |_________/
--- +//
-----+
|
|
向两边。
对于在不“破坏”当前笔的情况下添加它有什么建议吗？
到目前为止，我已尝试使用以下方法生成此形状：
#wing-mirror {
margin-top:40px;
width: 100px;
height: 50px;
background: red;
position: relative;
transform: rotate(-90deg);
border-radius:20px;
}
#wing-mirror:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 10px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: 0;
}
经过多次尝试，并发布了这个问题，
我已经创建了这个“后视镜”，但是由于我使用的是特定值，所以将这个“旁边”放在我的卡车上，对齐会中断，因此无论我在哪里，“发动机罩/挡风玻璃/车顶都不能正确对齐”把这个后视镜放在我的 html 中。
我完成的后视镜如下所示：
#wing-mirror {
margin-top: 40px;
width: 100px;
height: 50px;
background: gray;
position: relative;
transform: rotate(-90deg);
border-radius: 20px;
}
#wing-mirror:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 10px solid gray;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: 0;
}
.border-div {
width: 75px;
background-color: gray;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 30px;
}
.border-div-top {
width: 50px;
background-color: gray;
height: 10px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 50px;
margin-top: -20px;
}<div id="wing-mirror"></div>
<div class="border-div"></div>
<div class="border-div-top"></div>但是我怎样才能将它附加到我的整体卡车上呢？因为我尝试过的所有东西都会导致“跳跃”元素（它们不会“粘”在卡车上）并且它们没有正确对齐元素的侧面（不会出现在卡车的左侧或右侧，可能是由于实施不当）。
【问题讨论】：
-
你不能做类似
<div style="display: inline-block; background: gray;width: 40px;height: 60px;border-radius: 0 10px 15px 0;"> </div>的东西吗+你必须做挡风玻璃inline-block; -
这是一种运动吗？这真的不是 CSS 的用途。相反，您最好使用 SVG，它很容易嵌入 HTML。
-
你对 CSS 有某种误解……它是用于元素样式的，而不是用于绘制图片的。但是继续。你很快就会知道的；）
-
我认为人们在不是为这些特定任务设计的语言/环境中尝试事物真是太棒了。带上它！
-
我投票结束这个问题，因为它是一个有趣的形状，但我觉得它不值得保留在网站上，因为它确实表明 CSS 是正确的工具制作这样的形状。
标签： html css css-shapes