CSSまたはJqueryで境界線を作成することは可能ですが、コーナーのみが可能かどうか疑問に思っています。このようなもの:
**** ****
* *
* *
CONTENT
* *
* *
**** ****
重複する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 id="content">CONTENT</div>
およびCONTENT
には少なくとも1つのHTMLノードが含まれます。
#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}
これは、優れた応答性を実現するためにベクターの使用を開始する場合のもう1つの優れた代替手段です。
<svg viewBox="0 0 100 100" width="50px">
<path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
<path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
<path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
<path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>
SVGは使用に最適なツールです。この場合にSVGを使用する利点は次のとおりです。
インラインSVGのブラウザサポートはInternet Explorer 9に戻ります。詳細については canIuse を参照してください。
余分な擬似/実際の要素を使用せずにこの効果を作成する方法がいくつかあります。注意すべきことの1つは、これらのアプローチは両方ともCSS3プロパティを使用するため、最新のブラウザーでのみ機能することです。
Usingborder-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>
Usingbackground-image
:background-image
プロパティをlinear-gradient
イメージと共に使用して、効果を生成することもできます。アプローチは次のとおりです。
linear-gradient
イメージを作成します(上、下に2つ、左、右に2つ)。これらのグラデーションは、必要な色で始まり、境界画像の幅/高さと同じ数のピクセルでその色のままです。その後、透明になります。to right
である必要があります。左右の境界線の場合は、to bottom
である必要があります。background-size
値は、境界線の太さを決定します。上下の境界線の場合、グラデーション画像のサイズはX軸で100%、Y軸で5px(厚さ)になります。左右の境界線の場合、サイズはX軸で5ピクセル(厚さ)、Y軸で100%になります。background-repeat
は、上下の境界線ではrepeat-x
に、左右の境界線ではrepeat-y
に設定する必要があります。background-position
が(-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 {
width: 100px;
height: 100px;
margin: 20px;
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>
4つの<div>
s、各コーナーに1つずつ、それぞれに適切な2つの境界線があります。
[〜#〜] html [〜#〜]
<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>
[〜#〜] css [〜#〜]
.corners {
position: relative;
width: 100px; /* for demo purposes */
padding: 10px;
}
.top, .bottom {
position: absolute;
width: 10px;
height: 10px;
}
.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;
}
互いの上に2つの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>
私はこの質問を見つけましたが、境界線の半径のアプローチには満足していませんでした。より太い境界線を使用しているので、効果は望んでいたほど良くありませんでした。私は、画像や追加のマークアップなしで、別のソリューションを作成できました。
.box {
/* fake border */
position: relative;
overflow: hidden;
box-shadow: inset 0px 0px 0px 10px green;
padding: 1em;
}
.box:before {
/* this element will hide the fake border on the top and bottom */
content:'';
display: block;
position: absolute;
border-top:10px solid white;
border-bottom:10px solid white;
/* height = border-width x2 */
height:calc(100% - 20px);
top:0;
/* width = size of fake-border x2 */
width: calc(100% - 36px);
/* left = size of fake-border */
left:18px;
}
.box:after {
/* this element will hide the fake border on the left and right */
/* the rules for width, heigth, top and left will be the opposite of the former element */
display: block;
position: absolute;
content:'';
border-right:10px solid white;
border-left:10px solid white;
height:calc(100% - 36px);
width: calc(100% - 20px);
top:18px;
left: 0;
}
この例のJSFiddleを次に示します。 https://jsfiddle.net/t6dbmq3e/ 役に立てば幸いです。
私は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; }
ここでは、コンテンツを垂直方向と水平方向の両方に集中して最近やったことを示します。
HTML
<div class="column">
<div class="c-frame-wrapper">
<div class="c-frame-tl"></div>
<div class="c-frame-tr"></div>
<div class="c-frame-br"></div>
<div class="c-frame-bl"></div>
<div class="c-frame-content">
© Copyright 2015 - Company name<br /><br />
St Winifrids St,<br />
The Saints, Harrogate HG1 5PZ, UK<br />
</div>
</div>
</div>
CSS
.c-frame-wrapper {
width: 250px;
height: 100px;
font-size:11px;
color: $dark-grey-lighten-70;
/* center align x axis */
right: auto;
left: 50%;
transform: translateX(-50%);
}
.c-frame-tl {
top: 0;
left: 0;
position: absolute;
width:10px;
height:10px;
border-width: 3px;
border-style: solid none none solid;
border-color: #eb0000;
}
.c-frame-tr {
top: 0;
right: 0;
position: absolute;
width:10px;
height:10px;
border-width: 3px;
border-style: solid solid none none;
border-color: #eb0000;
}
.c-frame-br {
bottom: 0;
right: 0;
position: absolute;
width:10px;
height:10px;
border-width: 3px;
border-style: none solid solid none;
border-color: #eb0000;
}
.c-frame-bl {
bottom: 0;
left: 0;
position: absolute;
width:10px;
height:10px;
border-width: 3px;
border-style: none none solid solid;
border-color: #eb0000;
}
.c-frame-content {
width:100%;
text-align: center;
/*center alignment x and y*/
position: absolute;
top: 50%;
left: 50%;
bottom: auto;
right: auto;
transform: translate(-50%,-50%);
}
上記の答えを修正したバージョンがあります。このバージョンには、相対位置の親と絶対位置の子があり、ホバー効果を追加できます。
HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>
CSS:
#div1 {
position: relative;
height: 100px;
width: 100px;
background-color: white;
border: 1px solid transparent;
}
#div2 {
position: absolute;
top: -2px;
left: -2px;
height: 84px;
width: 84px;
background-color: #FFF;
border-radius: 15px;
padding: 10px;
}
#div1:hover {
border: 1px solid red;
}
最良の解決策は、擬似要素法だと思います。きれいできれいで、余分な要素が(多すぎる)HTMLを汚染しません。
コピー&ペーストソリューションのために、上記のコードを使用してこのsassミックスインを作成しました。
@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
position: relative;
border: $corner-width solid $color-border;
background-color: $color-background;
&::before {
content: "";
z-index: 0;
position: absolute;
top: -$corner-width;
bottom: -$corner-width;
left: $corner-size;
right: $corner-size;
background-color: $color-background;
}
&::after {
content: "";
z-index: 0;
position: absolute;
top: $corner-size;
bottom: $corner-size;
left: -$corner-width;
right: -$corner-width;
background-color: $color-background;
}
}
その後、次のように使用できます。
<div class="border">
<div class="content">
Content
</div>
</div>
.border {
@include corner-borders;
}
.content {
position: relative;
z-index: 1;
}
コンテンツが擬似要素の上に位置するように、そこにz-indexと相対位置が必要です。
ここでコードペンのデモを作成しました: http://codepen.io/timrross/pen/XMwVbV