logo标签列表

三角形边框

htmlcss
10
border-bottom: 6像素双黑色实线; border-right: 6像素双黑色实线;

> 外观样式

.title {
 width: 300px;
 height: 0px;
 border-bottom: 50px solid #f2f2f2;
 border-right: 50px solid transparent;
 opacity: .8;
 position: absolute;
 margin: 47px 0 0 62px;
}
#media {
 margin: 97px 0 0 62px;
 position: absolute;
 height: 100px;
 background-color: #f2f2f2;
 opacity: .8;
 width: 350px;
 z-index: 2;
 border-bottom: 6px double black;
 border-right: 6px double black;
}
<div id="media"></div>
<div class="title"></div>

要使其不透明，请使用：background: rbga(0, 0, 255, .7); 或 opacity: .7; // 使用 RGB 值来匹配您想要的颜色。 - warkentien2
你能提供你的代码吗？ - twxia
我认为解决这个问题的最佳方式是使用svg。 - twxia
甚至旋转或使用这种棘手的方法：https://jsfiddle.net/nqbnya6L/1/ 无法实现它~所以只需使用SVG。 - twxia
1个回答
5
我可以给你两个解决方案。第一个是(html + css)，第二个是(html + css + svg)。
第一个方案 有以下缺点：
  1. 只有一个边框
  2. 不具备响应式设计
  3. 必须使用纯色填充背景
  4. 在颜色和大小设置上缺乏灵活性

screen

HTML

<div class="figure">some text</div>

CSS

        * {
            font-size: 0;
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #5FC3B9;
        }

        /* The main figure */
        .figure {
            display: block;
            position: relative;
            margin: 100px auto;
            padding: 12px;
            opacity: .8;
            width: 356px;
            height: 131px;
            font: 16px/24px sans-serif;
            background-color: #eee;
            color: black;
            border-bottom: 2px solid #333;
            border-right: 2px solid #333;
        }

        /* Triangles - grey and white */
        .figure:after,
        .figure:before {
            display: inline-block;
            position: absolute;
            top:0;
            right: 0;
            border-left: 51px solid transparent;
            border-top: 51px solid #333;
            content: '';
            z-index: 100;
        }

        /* Styling for second triangle [WHITE] */

        .figure:before {
            border-left: 50px solid transparent;
            border-top: 50px solid transparent;
            border-top-color: #5FC3B9;
            right: -2px;
            z-index: 200;
        }

第二步

输入图像描述 输入图像描述

HTML + SVG

body{
    background-image: url("http://www.favewallpapers.com/pic/201409/2560x1600/favewallpapers.com-6863.jpg");
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}
<!DOCTYPE html>
<html>
    <head>
        <!-- There is only image for background -->
        <link rel="stylesheet" href="styles.css">
        <title>SVG</title>
    </head>
    <body>
        <svg
             xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
             xmlns:dc="http://purl.org/dc/elements/1.1/"
             xmlns:cc="http://creativecommons.org/ns#"
             xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:svg="http://www.w3.org/2000/svg"
             xmlns="http://www.w3.org/2000/svg"
             xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
             xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
             width="352.3125"
             height="127.15625"
             id="svg2"
             version="1.1"
             inkscape:version="0.48.4 r9939"
             sodipodi:docname="pic.svg">
            <defs
                  id="defs4">
                <marker
                        inkscape:stockid="Arrow1Lstart"
                        orient="auto"
                        refY="0"
                        refX="0"
                        id="Arrow1Lstart"
                        style="overflow:visible">
                    <path
                          id="path3778"
                          d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
                          style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
                          transform="matrix(0.8,0,0,0.8,10,0)"
                          inkscape:connector-curvature="0" />
                </marker>
                <linearGradient
                                id="linearGradient3768"
                                osb:paint="solid">
                    <stop
                          style="stop-color:#000000;stop-opacity:1;"
                          offset="0"
                          id="stop3770" />
                </linearGradient>
            </defs>
            <sodipodi:namedview
                                id="base"
                                pagecolor="#ffffff"
                                bordercolor="#666666"
                                borderopacity="1.0"
                                inkscape:pageopacity="0.0"
                                inkscape:pageshadow="2"
                                inkscape:zoom="5.6568542"
                                inkscape:cx="340.243"
                                inkscape:cy="137.89604"
                                inkscape:document-units="px"
                                inkscape:current-layer="layer1"
                                showgrid="false"
                                inkscape:snap-bbox="false"
                                inkscape:snap-global="true"
                                showguides="false"
                                inkscape:window-width="1557"
                                inkscape:window-height="876"
                                inkscape:window-x="43"
                                inkscape:window-y="24"
                                inkscape:window-maximized="1"
                                fit-margin-top="0"
                                fit-margin-left="0"
                                fit-margin-right="0"
                                fit-margin-bottom="0" />
            <metadata
                      id="metadata7">
                <rdf:RDF>
                    <cc:Work
                             rdf:about="">
                        <dc:format>image/svg+xml</dc:format>
                        <dc:type
                                 rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
                        <dc:title />
                    </cc:Work>
                </rdf:RDF>
            </metadata>
            <g
               inkscape:label="Layer 1"
               inkscape:groupmode="layer"
               id="layer1"
               transform="translate(-71.15625,-518.53125)">
                <path
                      style="fill:yellowgreen;fill-opacity:1;stroke:none;stroke-width:1;marker-start:none;marker-mid:none;marker-end:none;opacity:.5"
                      d="m 74.491046,522.04496 c 102.289934,0.14198 203.003944,-0.19977 305.293754,0.006 l 43.58138,41.8087 0,81.67725 -348.875134,0 z"
                      id="rect2985"
                      class="rec"
                      inkscape:connector-curvature="0"
                      sodipodi:nodetypes="cccccc" />
                <g
                   id="g5047"
                   transform="matrix(0.98121539,0,0,0.94590313,4.6760641,31.581257)">
                    <path
                          sodipodi:nodetypes="cc"
                          inkscape:connector-curvature="0"
                          id="path4977"
                          d="m 71.146119,648.47048 355.569031,0.29271"
                          style="fill:none;stroke:#000000;stroke-width:1.08983135px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
                    <g
                       id="g5043">
                        <path
                              style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
                              d="m 426.21302,648.62091 0,-85.89285"
                              id="path4997"
                              inkscape:connector-curvature="0" />
                        <path
                              style="fill:none;stroke:#000000;stroke-width:1.02321315px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
                              d="M 426.34207,563.06847 382.05871,518.78511"
                              id="path5017"
                              inkscape:connector-curvature="0" />
                    </g>
                </g>
                <g
                   id="g5053"
                   style="stroke:#000000;stroke-opacity:1"
                   transform="matrix(0.98121539,0,0,0.94590313,4.6760641,31.581257)">
                    <path
                          sodipodi:nodetypes="cc"
                          inkscape:connector-curvature="0"
                          id="path4977-9"
                          d="m 71.159296,644.85815 352.293394,0.29467"
                          style="fill:none;stroke:#000000;stroke-width:1.088462px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
                    <g
                       id="g5039"
                       style="stroke:#000000;stroke-opacity:1">
                        <path
                              style="fill:none;stroke:#000000;stroke-width:0.97621214px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
                              d="m 422.96875,645.67603 0,-81.85503"
                              id="path4997-6"
                              inkscape:connector-curvature="0" />
                        <path
                              style="fill:none;stroke:#000000;stroke-width:1.04563308px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
                              d="M 423.07384,564.14515 377.82017,518.89148"
                              id="path5017-5"
                              inkscape:connector-curvature="0" />
                    </g>
                </g>
            </g>
        </svg>

    </body>
</html>

这里有一些很好的文章和示例：

  1. 来自 mozilla.org
  2. smashing magazine（好网站）
  3. CSS tricks （添加到书签）

注意：本文档保留HTML标记，请勿删除。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接