我正在使用 2 个边框来制作这个三 Angular 形，我想要一个像下面的框一样的边框。(border-bottom: 6px double black; border-right: 6px double black;)三 Angular 形的斜边。最大的困难是它有点不透明。
>
.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 有以下缺点:
- 一个边框
- 非响应式设计
- 只需要使用实心填充背景
- 颜色和尺寸设置不灵活
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>有例子的好文章:
- 来自 mozilla.org
- From smashing magazine(好网站)
- CSS tricks(添加到书签)
关于html - 三 Angular 形上的边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37450884/