html - 如何创建卡车/卡车后视镜的形状？

标签 html css css-shapes 

.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>

但是我怎样才能把它安装到我的整辆卡车上呢？因为我尝试过的一切都会导致“跳跃”元素(它们不会“粘”在卡车上)并且它们不会正确对齐到元素的侧面(不会出现在卡车的左侧或右侧，可能是由于实现不当)。

最佳答案

Disclaimer: I don't believe this approach is the best to create the shape you are after. Depending on your use case, you should look into SVG or a normal png/jpeg.

我为每个镜子添加了一个元素，并在 .windscreen div 上为镜子臂使用了带有边框的倾斜伪元素。

为了定位镜子，我将 position:relative; 添加到 .windscreen div 并将镜子作为该 div 的子元素插入。这样就可以使用绝对定位将后视镜相对于挡风玻璃左右放置。

DEMO 

body{
    padding-left:100px;
}
.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 {
    position:relative;
  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;
}
.windscreen:after{
    content:'';
    position:absolute;
    left:100%; bottom:15px;
    width:10px; height:20px;
    transform:skewX(-30deg);
    border-bottom:12px solid #000;
    border-right: 12px solid #000;
    z-index:-1;
}
.windscreen:before{
    content:'';
    position:absolute;
    right:100%; bottom:15px;
    width:10px; height:20px;
    transform:skewX(30deg);
    border-bottom:12px solid #000;
    border-left: 12px solid #000;
    z-index:-1;
}
.mirror{
    position:absolute;
    left:100%; top:20px;
    margin-left:19px;
    height: 30px;
    width:20px;
    background:#000;
}

.mirror:before, .mirror:after{
    content:'';
    position:absolute;
    width:100%;
    box-sizing:border-box;
    bottom:100%;
    border-color: #000 transparent;
    border-width: 0 5px 10px 0;
    border-style:solid;
}
.mirror:after{
    bottom:auto;
    top:100%;
    border-width: 7px 3px 0 0;
}
.mirrorL{
    position:absolute;
    right:100%; top:20px;
    margin-right:19px;
    height: 30px;
    width:20px;
    background:#000;
}

.mirrorL:before, .mirrorL:after{
    content:'';
    position:absolute;
    width:100%;
    box-sizing:border-box;
    bottom:100%;
    border-color: #000 transparent;
    border-width: 0 0 10px 5px;
    border-style:solid;
}
.mirrorL:after{
    bottom:auto;
    top:100%;
    border-width: 7px 0 0 3px;
}
<div class="circle"></div>
<div class="circle" style="margin-left:240px;"></div>


<div class="roof"></div>

<div class="windscreen"><div class="mirror"></div><div class="mirrorL"></div></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>

关于html - 如何创建卡车/卡车后视镜的形状？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27355331/

上一篇：javascript - 在另一个 html 文件中包含 html

下一篇：html - Bootstrap 3 - 用 Iframe 100% 填充一个区域

相关文章：

html - 导航栏列表项根据列表字符串长度更改大小

css - 并排 float 两个 div 的问题(均不遵循包装宽度)

css - 带有右边缘三 Angular 形的图像

html - 在 CSS 中创建图形

html - 如何使用 HTML5 和 CSS 3 将按钮放置在一个圆圈周围？

html - 通过输入范围更改 css 规则

html - 在悬停时显示特定的 div？仅使用 css 和 html

html - 背景图像未正确对齐

javascript - 如何检查函数是否执行

javascript - 使用 parseInt 获取 div 元素属性总是返回 NAN

©2024 IT工具网  联系我们