В сети нашел интересное решение для скруглов. Все хорошо, но если в блок вставить ссылку, но она не кликабельна. В чем проблема и как решить?
https://jsbin.com/yenodeb/edit?html,css,output
.corners {
color: #000;
position: relative;
overflow: hidden;
min-width: 240px;
width: 310px;
}
.text {
background: #fff;
border: 2px solid #9b9b9b;
padding: 10px 20px 20px 20px;
}
.arc-top,
.arc-bottom {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.arc-top:before,
.arc-top:after,
.arc-bottom:before,
.arc-bottom:after {
content: '';
position: absolute;
width: 24px;
height: 24px;
background-color: #fff;
border: 2px solid #9b9b9b;
border-radius: 50%;
}
.arc-top:before {
top: -12px;
left: -12px;
}
.arc-top:after {
top: -12px;
right: -12px;
}
.arc-bottom:before {
bottom: -12px;
left: -12px;
}
.arc-bottom:after {
bottom: -12px;
right: -12px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="corners">
<div class="arc-top"></div>
<div class="text">
<h3>Zagolovok</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <a title="" href="#">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<div class="arc-bottom"></div>
</div>
</body>
</html>
25px
. При этом еще у верхнего сделайте параметрtop:0
, а у нижнегоbottom:0
, вместо top ......а отсюда.arc-top, .arc-bottom {
скорее надо будет убратьtop:0
– Алексей Шиманский 20 мая '16 в 5:52