用css制作复杂的盒子[关闭]

【问题标题】：Making complex boxes with css [closed]用css制作复杂的盒子[关闭]
【发布时间】：2014-09-26 16:57:39
【问题描述】：

我在用 CSS 制作这个盒子时遇到了麻烦。

我不知道如何创建顶部

只使用图片会更好吗？

【问题讨论】：

  • 看你是想用图片还是用css制作
  • 我想用css创建，但我不知道从哪里开始。
  • 这只是您在制作票证时遇到的问题吗？您可以为此使用 svg。
  • 不行，都过头了，不知道这些线怎么弄
  • 如果你想使用 css 让它变得简单你可以使用背景图片并且只使用 css 放置文本、按钮、边框

标签： css box


【解决方案1】：

下次请包括您对 HTML/CSS 的尝试。

我专注于尽量减少 HTML 标记的数量。这是兼容IE8+

  • 票据图像是唯一使用的背景图像。

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

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

  • 由于position: relative，伪元素相对于.ticket div 定位

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

HTML / CSS / 演示

* {
  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;
}
<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>

【讨论】：

  • omg，你对 css man 非常擅长哈哈.. ty 用于解释，ty 用于代码！ :D
【解决方案2】：

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

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

纯 HTML 和 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;
}

【讨论】：

  • 你用纯 html/css 制作票真是太疯狂了。但我认为 svg 会更适合。
  • @thgaskell 是的，但不幸的是，OP 不需要图像或 svg。 :)
【解决方案3】：

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

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

【讨论】：

  • 你在正确的轨道上，但你的一些 CSS 是不必要的（p 和 h1 已经是块元素）。这是更新的小提琴：jsfiddle.net/np085aw6/5
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-05-01
  • 2015-01-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-08-05
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode