个人中心
gpt4 book ai didi

html - 三 Angular 形上的边框

转载 作者：太空狗 更新时间：2023-10-29 13:15:11 25 4
gpt4 key购买 nike

我正在使用 2 个边框来制作这个三 Angular 形，我想要一个像下面的框一样的边框。(border-bottom: 6px double black; border-right: 6px double black;)三 Angular 形的斜边。最大的困难是它有点不透明。

> What it Looks like 

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

最佳答案

我可以给你两个解决方案。第一个 (html + css) 和第二个 (html + css + svg)。

First 有以下缺点:

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

第二

enter image description here enter image description here

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. From smashing magazine(好网站)
  3. CSS tricks(添加到书签)

关于html - 三 Angular 形上的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37450884/

25 4 0
文章推荐： git - git 中修剪的区别
文章推荐： git - 我应该在镜像仓库还是原始仓库上运行 BFG？
文章推荐： git - 在不同文件夹中的分支之间共享代码
文章推荐： git - 如何在 IntelliJ 15 中执行自动 git push？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com