用css制作复杂的盒子

时间：2014-09-26 16:57:40

标签： css box

我在使用CSS制作此框时遇到问题。

我不知道如何创建顶部

enter image description here

使用图片会更好吗？

3 个答案:

答案 0 :(得分：1)

下次请尝试使用HTML / CSS。

我专注于最小化HTML标记的数量。这是兼容的IE8 +

  • 故障单图像是唯一使用的背景图像。

  • h2和p元素与display: inline-block

    • 对齐

  • 请注意:before和:after伪元素。它们的位置为position: absolute和right / top

  • 由于.ticket

    • ，伪元素相对于position: relative div而定位

Here is a simple explanation of :before / :after on CSS Tricks

HTML / CSS / Demo

＆＃13;
＆＃13; 
* {
  margin: 0;
  padding: 0;
}
body {
  background: #2B343C;
  font-family: helvetica;
}
.ticket {
  background: #BA575A;
  border: solid 2px #BA575A;
  position: relative;
  z-index: 1;
  border-radius: 2px 2px 5px 5px;
  width: 500px;
  margin: 100px auto 0;
  height: 190px;
}
.ticket:after {
  position: absolute;
  display: block;
  content: '';
  top: -50px;
  right: 10px;
  height: 75px;
  width: 150px;
  background: #2B343C url(http://i.stack.imgur.com/nEnSo.png) center no-repeat;
}
.ticket:before {
  position: absolute;
  display: block;
  content: '';
  top: 0;
  right: 0;
  height: 3em;
  width: 100%;
  background: #2B343C;
  z-index: -1
}
.ticket h1 {
  color: orange;
  text-transform: uppercase;
  border-right: solid 2px #BA575A;
  width: 160px;
  height: 1.5em;
  background: #2B343C;
  padding: 0.5em 0 0 0.5em;
  font-size: 1.5em;
  font-weight: normal;
}
.ticket h2 {
  width: 190px;
  font-size: 2em;
  font-weight: normal;
  padding: 0 0.2em 0 0.5em;
  border-right: solid 2px #2B343C;
  margin-top: 0.5em;
  display: inline-block;
  vertical-align: top;
  text-transform: uppercase;
  line-height: 1.5;
  color: #2B343C;
}
.ticket p {
  display: inline-block;
  margin-top: 1em;
  width: 230px;
  vertical-align: top;
  padding-left: 1em;
  color: #2B343C;
}
.ticket a {
  display: block;
  background: #2B343C;
  padding: 0.8em 0.5em;
  display: block;
  width: 100px;
  text-align: center;
  text-decoration: none;
  color: orange;
  text-transform: uppercase;
  margin: 0.5em 0;
}
＆＃13; 
<div class="ticket">
  <h1>Ingressos</h1>
  <h2>Homen 60 Mulher 40</h2>
  <p>Garanta já sua participação nessa festa!
    <a href="#">Comprar</a>
  </p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您可以使用SVG进行此操作并在HTML文件中复制SVG图像的代码：

@import url(http://fonts.googleapis.com/css?family=Abel);
<svg width="515px" height="241px" viewBox="0 0 515 241" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect fill="#2A333C" x="0" y="0" width="515" height="241"></rect>
        <text font-family="Abel, Helvetica" font-size="24" font-weight="normal" fill="#F98835">
            <tspan x="25" y="82">INGRESSOS</tspan>
        </text>
        <rect stroke="#C05B5B" stroke-width="2" x="21" y="50" width="477" height="172" rx="3"></rect>
        <rect fill="#2A333C" x="356" y="34" width="130" height="31"></rect>
        <rect stroke="#C05B5B" stroke-width="2" fill="#C05B5B" x="21" y="96" width="477" height="126" rx="3"></rect>
        <path d="M135,53 L135,96" stroke="#C05B5B" stroke-width="2" stroke-linecap="square"></path>
        <text font-family="Abel, Helvetica" font-size="35" font-weight="normal" line-spacing="41" letter-spacing="0.5" fill="#2A333C">
            <tspan x="43" y="154">HOMEM 60</tspan>
            <tspan x="43" y="195">MULHER 40</tspan>
        </text>
        <path d="M228,115.5 L228,202.5" id="Line" stroke="#2A333C" stroke-width="2" stroke-linecap="square"></path>
        <text id="Garanta-já-sua-parti" font-family="Abel" font-size="16" font-weight="normal" line-spacing="19" letter-spacing="0.200000018" fill="#2A333C">
            <tspan x="251" y="130">Garanta já sua participação</tspan>
            <tspan x="251" y="149">nessa festa!</tspan>
        </text>
        <g transform="translate(247.000000, 159.000000)">
            <rect fill="#2A333C" x="0" y="0" width="93" height="40"></rect>
            <text font-family="Abel" font-size="20" font-weight="normal" letter-spacing="0.300000012" fill="#F98835">
                <tspan x="8" y="27">COMPRAR</tspan>
            </text>
        </g>
        <g transform="translate(364.000000, 13.000000)">
            <path d="M3.73057837,26.7837314 L100.930103,0.379469982 L107.034807,4.53877117 L103.904733,11.2464098 L110.009438,15.4481047 L107.324498,21.5528095 L112.710864,26.1996392 L108.688165,32.4409462 L115.446227,35.8630666 L112.868663,43.5707052 L15.996513,69.5378618 L8.54933841,65.9414559 L12.5743926,58.9229295 L5.74101156,54.7640513 L9.54299438,47.7245921 L3.02244337,43.7949341 L6.44140082,37.0263286 L0.373184532,33.0428647 L3.73057837,26.7837314 Z" stroke="#F98835" stroke-width="2"></path>
            <path d="M21.5795366,67.2205836 L12.3893924,31.2016147 C12.1168245,30.1333381 12.7604445,29.0321044 13.8170832,28.744627 L84.660034,9.4705347 C85.7210938,9.1818544 86.8214333,9.81627166 87.1136925,10.8730153 L95.5724651,41.4580295 C95.8665236,42.5212785 95.2311385,43.6193989 94.166266,43.9072434 L26.9980079,62.0634206" stroke="#F98835"></path>
            <text transform="translate(32.000000, 41.500000) rotate(-107.000000) translate(-32.000000, -41.500000) " font-family="Abel" font-size="21" font-weight="normal" fill="#F98835">
                <tspan x="19" y="49">VIP</tspan>
            </text>
            <text transform="translate(76.000000, 42.000000) rotate(-15.000000) translate(-76.000000, -42.000000) " font-family="Abel" font-size="8" font-weight="normal" fill="#F98835">
                <tspan x="60" y="45">Admid one</tspan>
            </text>
            <path d="M92.5,8.5 L93.1483033,11.1666667" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M93.8241516,14.2167588 L94.4391613,17.1521941" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M93.8241516,14.2167588 L94.4391613,17.1521941" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M96.70818,26.2192818 L97.4391613,29.1521941" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M98.4239825,32.2195799 L99.2862594,35.2196231" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M100.400275,38.7292127 L101.31153,41.8994105" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M102.164179,44.682662 L102.773932,46.6356994" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M95.1316565,20.0481727 L95.7823818,23.1424474" stroke="#F48635" stroke-linecap="square"></path>
            <path d="M91.5,3.5 L92.1331204,6.16666667" stroke="#F48635" stroke-linecap="square"></path>
        </g>
    </g>
</svg>

答案 2 :(得分：0)

所以，这就是我到目前为止所做的。您可以修改或改进它。

演示：http://jsfiddle.net/lotusgodkk/GCu2D/356/

Pure HTML＆amp; CSS。没有图片。

<强> HTML ：

<div class="checked">
    <div class="i">
        <div class="j">
            <div class="j1"></div>
            <div class="j2">
                <div class="t">
                    <div class="t1">
                        <div class="n">
                            <div class="n1">VIP</div>
                            <div class="n2">Admit one</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="k">
            <div class="k1"></div>
            <div class="k2"></div>
        </div>
    </div>
</div>

<强> CSS： 

.checked {
    background-color:#2A333C;
    width:470px;
    padding:20px;
}
.i {
    box-sizing:border-box;
    height:inherit;
    width:inherit;
    margin-top:40px;
}
.j {
    border:2px solid #C05B5B;
    border-radius:4px 4px 0 0;
    height:40px;
}
.k {
    background-color:#C05B5B;
    height:120px;
    padding:20px;
}
.j1, .j2 {
    display:inline-block;
    vertical-align:middle;
    height:inherit;
    box-sizing:border-box;
}
.j1 {
    width:106px;
    border-right:2px solid #C05B5B;
}
.j2 {
    width:356px;
    position:relative;
}
.k1, .k2 {
    display:inline-block;
    box-sizing:border-box;
    width:50%;
    height:100%;
}
.k1 {
    border-right:2px solid #2A333C
}
.t {
    padding: 5px;
    background: #2A333C;
    width: 100px;
    height: 50px;
    transform: rotate(-15deg);
    position: absolute;
    right: 10px;
    top: -20px;
}
.t1 {
    border: 2px solid #F98835;
    top: 0;
    right: 0;
    border-width: 2px 0;
    padding:4px;
    position:absolute;
    width:100%;
    box-sizing:border-box;
    height:100%;
    margin:10px;
}
.t1:after, .t1:before {
    position: absolute;
    width: 10px;
    font-size: 20px;
    color: #F98835;
    overflow: hidden;
    word-break: break-all;
    line-height: 10px;
    font-family: monospace;
    height: 60px;
}
.t1:before {
    content:"<<<<<<";
    top: -3px;
    left: -7px;
}
.t1:after {
    content:">>>>>>>";
    top: -2px;
    border-left: 2px dashed #f98835;
    right: -10px;
}
.n {
    border:2px solid #F98835;
    border-radius:2px;
    height:inherit;
    box-sizing:border-box;
}
.n1 {
    transform: rotate(270deg);
    transform-origin: left top 0;
    float:left;
    color:#F98835;
    position:relative;
    top:80%;
    font-size:18px;
}
.n2 {
    color: #F98835;
    font-size: 10px;
    display: inline-block;
    vertical-align: bottom;
    padding: 30px 10px;
}
相关问题
最新问题