通常真四角ならborderを重ねるのは簡単だけど，ここから角を丸めるとなると意外に面倒．こ今回は:before擬似要素と:after擬似要素を使って角を丸めたブロックを尖った角に重ねることで対処してみた．
試しに:afterと:beforeを外してみると何をしているか分かってもらえると思う．
他の解決策としては，border-imageを使う方法があると思うのだが，対応するブラウザが少ないのと，いまいち使い勝手が悪いので今回は割愛．
またimg要素に:before擬似要素と:after擬似要素が効かないことも理解した．よく考えりゃimg要素は子供を持たないのだから当たり前の話だなあと．
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
/*共通border設定*/
div.container,
div.container>div.left,
div.container>div.left:before,
div.container>div.left:after,
div.container>div.right,
div.container>div.right:before,
div.container>div.right:after{
border-style:solid;
border-color:orange;
}
div.container{
width:450px;
background-color:lightyellow;
font-family:serif;
font-size:12px;
padding:5px;
margin:10px;
border-width:5px;
border-radius:10px;
}
div.container>div.left,
div.container>div.right{
background-color:white;
position:relative;
}
div.container>div.left{
float:left;
border-width:0 5px 5px 0;
border-radius:0 0 10px 0px;
margin:-10px 5px 5px -10px;
padding:0 5px 5px 0;
}
div.container>div.right{
float:right;
border-width:0 0 5px 5px;
border-radius:0 0 0 10px;
margin:-10px -10px 5px 5px;
padding:0 0 5px 5px;
}
/*:after擬似要素と:before擬似要素を尖った角の上に重ねてしまう．*/
div.container>div.left:before,
div.container>div.left:after,
div.container>div.right:before,
div.container>div.right:after{
content:"";
display:block;
width:10px;
height:10px;
position:absolute;
}
div.container>div.left:before,
div.container>div.left:after{
border-width:5px 0 0 5px;
border-radius:10px 0 0 0;
box-shadow:-5px -5px 0 white;/*白い影で角を消す*/
}
/*尖った角に丸い角を重ねる*/
div.container>div.left:before{
left:0;
bottom:-15px;
}
div.container>div.left:after{
right:-15px;
top:0;
}
div.container>div.right:before,
div.container>div.right:after{
border-width:5px 5px 0 0;
border-radius:0 10px 0 0;
box-shadow:5px -5px 0 white;/*白い影で角を消す*/
}
/*尖った角に丸い角を重ねる*/
div.container>div.right:before{
left:-15px;
top:0;
}
div.container>div.right:after{
right:0;
bottom:-15px;
}
div.container>p:first-letter{
color:white;
background-color:darkorange;
border-radius:10px 0 10px 0;
padding:0.1em;
margin-right:0.1em;
float:left;
font-size:2.5em;
font-weight:bold;
width:1em;
height:1em;
text-align:center;
}
</style>
<!--
<script type="text/javascript">
</script>
-->
</head>
<body>
<div class="container">
<div class="right"><img src="maria.jpg"/></div>
<p>Maria Renard is a vampire huntress …
</div>
<div class="container">
<div class="left"><img src="charlotte.jpg"/></div>
<p>Charlotte Aulin is a gifted young …
</div>
</body>
</html>
投稿
0 件のコメント:
コメントを投稿