This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?
border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
HTML
<div class="centered rd-notice-bg" style="width:60vw; height:320px;"> <div class=test> This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border? </div> </div>
centered rd-notice-bg は、Raindropsテーマ特有のクラスです
centered は、縦横中央揃え
rd-notice-bg は、色を指定しています。読み替えてください
CSS
.test{
background:#ecf0f1;
color:#369;
border:solid 5px #d35400;
width:200px;
max-width:80%;
margin:25px auto;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
padding:10px;
position:relative;
box-shadow:2px 5px 5px rgba(0, 0, 0, 0.4);
}