Tôi đang tìm cách tạo một hình vuông không hoàn chỉnh với đường viền với một số văn bản và nền có css thuần túy. Dưới đây là những gì tôi đang cố gắng để đạt được:Đường viền không hoàn chỉnh quanh div
ý tưởng ban đầu của tôi là để tạo ra các hình dạng dựa trên ba hình dạng và sau đó tô màu cho biên giới phù hợp:
Nhưng tôi là một chút lo ngại về phiên bản thích ứng - chia tỷ lệ ba hình dạng. Vì vậy, có thể là một ý tưởng tốt hơn, bất cứ ai?
Cách tiếp cận này cho phép bạn:
Nó dựa trên 2 thành phần giả định vị trí tuyệt đối và div. Khoảng cách giữa nội dung và biên giới được điều khiển bởi các padding trên div:
div{
position:relative;
display:inline-block;
padding:50px 100px;
border-left:1px solid #000;
text-align:center;
}
div:before, div:after{
content:'';
position:absolute;
right:50%; left:0;
height:50px;
border-right:1px solid #000;
}
div:before{
top:0;
border-top:1px solid #000;
}
div:after{
bottom:0;
border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}<div>
<h2>This is a very long title on<br/> 2 lines</h2>
<button>Button</button>
<p>Some text</p>
</div>mặc dù tôi nhận được một loạt các câu trả lời hay, tôi sẽ chọn cái này là linh hoạt nhất. –
Hầu như quên - bạn có thể thấy câu trả lời của bạn trong hành động ở đây: http://www.novadentspb.ru –
@denis good job :) –
Bạn có thể làm điều này với :before và :after yếu tố giả
Hoàn thành thiết kếFiddle
.square {
width: 200px;
height: 300px;
border-left: 1px solid gray;
border-bottom: 1px solid gray;
border-top: 1px solid gray;
position: relative;
}
.square:before, .square:after {
content: "";
height: 20%;
position: absolute;
right: 0;
border-right: 1px solid gray;
}
.square:before {
bottom: 0;
}<div class="square"></div>hoặc SVG
line {
stroke: #6996FB;
stroke-width: 2;
}
svg {
overflow: visible;
}
button {
padding: 10px 50px;
border: none;
color: white;
margin-right: 10px;
margin-top: 15px;
}
.btn-blue {
background: #5D8CFF;
}
.btn-green {
background: #33F1D9;
}
h3 {
margin: 0;
}<svg width="250" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg">
<line x1="1" y1="1" x2="250" y2="1"></line>
<line x1="0" y1="300" x2="250" y2="300"></line>
<line x1="1" y1="1" x2="1" y2="300"></line>
<line x1="249" y1="0" x2="249" y2="70"></line>
<line x1="249" y1="230" x2="249" y2="300"></line>
<foreignobject x="60" y="90" width="400" height="180">
<body xmlns="http://www.w3.org/1999/xhtml">
<h3>Lorem ipsum dolor sit <br> amet, consectetur adipisicing elit. Suscipit</h3>
<button class="btn-blue">Btn 1</button><button class="btn-green">Btn 2</button>
</body>
</foreignobject>
</svg>Bạn có thể làm gì với css pseudo ::after và ::before, một cái gì đó như thế này
.incomplete-box{
border: solid 1px #fff;
border-right: none;
width: 100px;
height: auto;
position: relative;
}
.incomplete-box::after,
.incomplete-box::before{
content: '';
position: absolute;
height: 30%;
width: 1px;
background-color: #fff;
right: 0;
}
.incomplete-box::after{
top: 0;
}
.incomplete-box::before{
bottom: 0;
}
Demo
cố định chiều rộng và chiều cao: https://jsfiddle.net/nikhilvkd/qt5ne3yw/
Chiều rộng và chiều cao tự động: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/
. nhưng đây là chiều cao cố định và chiều rộng, nhìn vào một ngã ba - https://jsfiddle.net/ramsunvtech/0v3k8rv8/ –
bạn có thể làm cho chiều cao và chiều rộng như tự động, kiểm tra fiddle cập nhật của bạn https://jsfiddle.net/nikhilvkd/0v3k8rv8/1/ – Krish
Vâng, hãy làm theo các câu trả lời ở trên, tôi khuyên bạn nên sử dụng các yếu tố pseudo để đạt được hiệu ứng này.
Nhưng có một cách khác để thực hiện việc này mà không cần sử dụng các phần tử giả .
Đây là cách bạn nên thực hiện việc này.
.row{display:table;table-layout:fixed;}
.col{display:table-cell;}
.row{width:250px; margin: auto;}
.mid.row > .col{ height: 100px; }
.col{ text-align: center;}
.top.col, .bottom.col{
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
height: 50px;
}
.bottom.col{
border-top: 0;
border-bottom: 1px solid black;
}
.mid.row > .col{
border-left: 1px solid black;
border-right: 0;
vertical-align: middle;
text-align: right;
}
.mid.row > .col span{
margin-right: -30px;
max-width: 300px;
}<div class="row">
<div class="top col"></div>
</div>
<div class="mid row">
<div class="col">
<span>Hey you can achieve this without using pseudo elements :)</span>
</div>
</div>
<div class="row">
<div class="bottom col"></div>
</div>
phần mã của bạn xin vui lòng? –
Ý tưởng ban đầu của bạn là chính xác. Trên thực tế, nếu bạn vào trang web của tôi www.joeltbennett.com, bạn có thể thấy tôi đã sử dụng một phương pháp tương tự để vẽ các đường chấm chấm – Joel
Không phải là một bản sao chính xác nhưng bạn sẽ nhận được ý tưởng từ chủ đề này - http://stackoverflow.com/questions/31205386/cách thêm đường viền-tới-một-container-với-trong suốt-khoảng trống-ở giữa – Harry