CSSで境界線を作成することは可能かどうか疑問に思っていますが、コーナーのみです。このようなもの：
**** ****
* *
* *
CONTENT
* *
* *
**** ****
少なくとも 1 つの HTML ノードが含まれていると仮定<div id="content">CONTENT</div>します。CONTENT
#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute; content:' ';
width:80px; height: 80px;
border-color:red; /* or whatever colour */
border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}
ここにフィドルがあります
重複する div を使用します。
角が四角いもの。そして角が丸くなっているその他（最初のものの角を隠しません）。
<div id="div1" />
<div id="div2" />
#div1 {
position:absolute;
top:9px;
left:9px;
height:100px;
width:100px;
background-color:white;
border:1px solid black;
}
#div2 {
position:relative;
top:-1px;
left:-1px;
height:102px;
width:102px;
background-color:white;
border-radius: 15px;
}
結果：
@web-tiki が提供する拡張ソリューション:
背景画像として複数の線形グラデーションを使用してそれを実現できます。
div {
width: 100px;
height: 100px;
background:
linear-gradient(to right, black 4px, transparent 4px) 0 0,
linear-gradient(to right, black 4px, transparent 4px) 0 100%,
linear-gradient(to left, black 4px, transparent 4px) 100% 0,
linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
linear-gradient(to top, black 4px, transparent 4px) 0 100%,
linear-gradient(to top, black 4px, transparent 4px) 100% 100%;
background-repeat: no-repeat;
background-size: 20px 20px;
}<div></div>追加の擬似/実要素を使用せずにこの効果を作成する方法をいくつか紹介します。注意すべきことの 1 つは、これらのアプローチは両方とも、CSS3 プロパティを使用するため、最新のブラウザーでのみ機能するということです。
Using border-image :border-imageプロパティを使用すると、このような効果を非常に簡単に作成できます。アプローチは次のとおりです。
border-image-source、残りはブラウザに任せてください :) のデフォルト値border-image-repeatはstretchであるため、コンテナが大きくなっても、ブラウザは元の画像をコンテナに合わせて引き伸ばします。border-image-widthによって、境界線の太さが決まります。.bordered {
background-color: beige;
border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
border-image-slice: 1;
border-image-width: 5px;
}
.square {
height: 150px;
width: 150px;
}
.large-square {
height: 350px;
width: 350px;
}
/* Just for demo */
div {
margin-bottom: 10px;
}<div class='bordered square'></div>
<div class='bordered large-square'></div>利点:
欠点:
境界線の画像が引き伸ばされているため、元の画像のキャンバスが正方形でコンテナーが長方形の場合、境界線は左右よりも上下で広く見えます。
.bordered {
background-color: beige;
border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
border-image-slice: 2;
border-image-width: 5px;
}
.small-square {
height: 75px;
width: 75px;
}
.square {
height: 150px;
width: 150px;
}
.large-square {
height: 350px;
width: 350px;
}
.rectangle {
height: 150px;
width: 250px;
}
.large-rectangle {
height: 150px;
width: 350px;
}
/* Just for demo */
div {
margin-bottom: 10px;
}<div class='bordered small-square'></div>
<div class='bordered square'></div>
<div class='bordered large-square'></div>
<div class='bordered rectangle'></div>
<div class='bordered large-rectangle'></div>使用 background-image: このbackground-imageプロパティをlinear-gradient画像で使用して、効果を生み出すこともできます。アプローチは次のとおりです。
linear-gradient(上下に 2 つ、左右に 2 つ)。これらのグラデーションは、必要な色で始まり、ボーダー画像の幅/高さと同じ数のピクセルに対してその色であり続けます。その後、透明になるはずです。to right。左右の境界線の場合は、 になりますto bottom。background-size値は境界線の太さを決定します。上下の境界線の場合、グラデーション イメージのサイズは X 軸で 100%、Y 軸で 5px (厚さ) になります。左右の境界線のサイズは、X 軸で 5px (太さ)、Y 軸で 100% になります。background-repeatを設定する必要があります。repeat-xrepeat-ybackground-position、必要に応じて X 軸または Y 軸で (-1 * グラデーションの色のサイズの半分) に設定されます。これは、色付き領域の半分を要素の片側に表示し、残りの半分を反対側に表示するためです (グラデーションが繰り返されるため)。.bordered.square {
height: 150px;
width: 150px;
}
.bordered.rectangle {
height: 150px;
width: 250px;
}
.bordered {
background-color: beige;
background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px);
background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
/* Just for demo */
div {
margin-bottom: 10px;
}<div class='bordered square'></div>
<div class='bordered rectangle'></div>利点:
グラデーションの色の幅が固定されているため、適度に反応します。ボーダー ダッシュの幅をコンテナーの寸法に応じて変更する必要がある場合は、以下のスニペットのように、グラデーションのピクセル値をパーセンテージに変更できます (さらにいくつかの小さな変更を加えます)。
.bordered.square {
height: 150px;
width: 150px;
}
.bordered.large-square {
height: 250px;
width: 250px;
}
.bordered {
background-color: beige;
background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}
/* Just for demo */
div {
margin-bottom: 10px;
}<div class='bordered square'></div>
<div class='bordered large-square'></div>欠点:
border-imageここにも当てはまります。<div>各コーナーに 1 つずつ、適切な 2 つの境界線を持つ4 つの を絶対に配置できます。
.corners {
position: relative;
width: 50px; /* for demo purposes */
padding: 10px;
}
.top, .bottom {
position: absolute;
width: 20px;
height: 20px;
pointer-events: none;
}
.top {
top: 0;
border-top: 1px solid;
}
.bottom {
bottom: 0;
border-bottom: 1px solid;
}
.left {
left: 0;
border-left: 1px solid;
}
.right {
right: 0;
border-right: 1px solid;
}<div class="corners">
<div class="top left"></div>
<div class="top right"></div>
<div class="bottom right"></div>
<div class="bottom left"></div>
content goes here
</div>.wrapper {
display: inline-block;
background-color: black;
line-height: 0px;
-webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%);
clip-path: polygon(0% 100%,
30% 100%,
30% 70%,
70% 70%,
70% 100%,
100% 100%,
100% 70%,
70% 70%,
70% 30%,
100% 30%,
100% 0%,
70% 0%,
70% 30%,
30% 30%,
30% 0%,
0% 0%,
0% 30%,
30% 30%,
30% 70%,
0% 70%);
}
.wrapper {} .wrapper div {
display: inline-block;
height: 150px;
width: 150px;
margin: 10px;
background-color: white;
}<div class="wrapper">
<div></div>
</div>2 つの大きな疑似要素を使用して、境界効果を作成できます。
.cut-border {
position: relative;
display: inline-block;
border: 5px solid black;
width: 150px;
height: 150px;
}
.cut-border::before {
content: "";
position: absolute;
height: calc(100% + 10px);
width: 50%;
background-color: white;
top: -5px;
left: 25%;
}
.cut-border::after {
content: "";
position: absolute;
height: 50%;
width: calc(100% + 10px);
background-color: white;
top: 25%;
left: -5px;
}<div class="cut-border"></div>私はCSSを吸うので、私は自分でそれを行うことはできないと思いますが、私はそれを行い、うまくいくようです:
<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>
<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>
そして、うまくいっているようです ;-) お邪魔して申し訳ありません。助けてくれてありがとう。
角に境界線を与えるだけのきれいな css の方法はありませんが、効果を模倣することはできます。おそらくこのようなもの：http://jsfiddle.net/RLG4z/
<div id="corners">
<div id="content">
content
</div>
</div>
#corners {
width: 200px;
height: 50px;
border-radius: 10px;
background-color: red;
margin: 10px;
}
#content {
background-color: white;
border-radius: 15px;
height: 30px;
padding: 10px;
}
境界線の半径の違いにより、下にある div の背景色が谷を示し、コーナーに境界線の効果を与えます。
個人的には、結果をより適切に制御するために、背景画像を使用してこれを実現すると思います。
これは君の写真だよ：
HTML:
<div class="shell">
<div class="top">
<div class="clear">
<div class="left">
****
</div>
<div class="right">
****
</div>
</div>
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
</div>
<div class="content">
<p>CONTENT</p>
</div>
<div class="bottom">
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
<div class="clear">
<div class="left">
*
</div>
<div class="right">
*
</div>
</div>
<div class="clear">
<div class="left">
****
</div>
<div class="right">
****
</div>
</div>
</div>
およびCSS:
.shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }