Tạo đường viền border css sử dụng transform skew

Hướng dẫn tạo đường viền siêu đẹp cho khung hình theo kiểu transform skew kết hợp với background gradient, hi vọng sẽ giúp bạn có thêm nhiều lựa chọn trong việc thiết kế.

HTML

<div class="container">
    <div class="box">
        <div class="content">
            <h2>01</h2>
            <h3>Service One</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sint in, provident officiis labore, iste fugiat</p>
            <a href="#">Read More</a>
        </div>
    </div>
    <div class="box">
        <div class="content">
            <h2>02</h2>
            <h3>Service Two</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sint in, provident officiis labore, iste fugiat</p>
            <a href="#">Read More</a>
        </div>
    </div>
    <div class="box">
        <div class="content">
            <h2>03</h2>
            <h3>Service Three</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sint in, provident officiis labore, iste fugiat</p>
            <a href="#">Read More</a>
        </div>
    </div>
    <div class="box">
        <div class="content">
            <h2>04</h2>
            <h3>Service Four</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur sint in, provident officiis labore, iste fugiat</p>
            <a href="#">Read More</a>
        </div>
    </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
body {
 font-family: 'Poppins', sans-serif;margin: 0;padding: 0;background: #060c21;
 display: flex;justify-content: center;align-items: center;min-height: 100vh; 
}
.container {
 position: relative;width: 90%;display: grid;grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
 grid-gap: 0 40px;grid-template-rows: auto;
}
.container .box {
 position: relative;height: 400px;background: #060c21;display: flex;justify-content: center;
 align-items: center;border: 1px solid #000;color: #fff;
}
.container .box:before {
 content: '';position: absolute;top: -2px;left: -2px;right: -2px;bottom: -2px;background: #fff;z-index: -1;transform: skew(2deg, 2deg);
}
.container .box:nth-child(1):before {
 background: linear-gradient(315deg, #ff0057, #e64a19);
}
.container .box:nth-child(2):before {
 background: linear-gradient(315deg, #89ff00, #00bcd4);
}
.container .box:nth-child(3):before {
 background: linear-gradient(315deg, #e91e63, #5d02ff);
}
.container .box:nth-child(4):before {
 background: linear-gradient(315deg, #ff0000, #ffc107);
}
.container .box .content {
 position: relative;padding: 20px 20px;
}
.container .box .content h2 {
 position: absolute;top: -60px;right: 20px;margin: 0;padding: 0;font-size: 10em;color: rgba(255, 255, 255, 0.05);
 transition: all 0.5s;
}
.container .box:hover .content h2 {
 top: -120px;color: rgba(255, 255, 255, 0.3);
}
.container .box .content h3 {
 margin: 0 0 10px;padding: 0;font-size: 24px;font-weight: 500;
}
.container .box .content p {
 margin:0;padding: 0;font-size: 16px;
}
.container .box .content a {
 position: relative;margin: 20px 0 0;padding: 10px 20px;text-decoration: none;border: 1px solid #fff;
 display: inline-block;color: #fff;transition: all 0.5s;transform: translateY(-40px);opacity: 0;visibility: hidden;
}
.container .box .content a:hover {
 color: #000;background: #fff;
}
.container .box:hover .content a {
 opacity: 1;visibility: visible;transform: translateY(0);
}

Bài viết đươc tham khảo tại:
https://www.youtube.com/watch?v=-1U62fdmCk4

Các bạn có thể xem demo và code online tại đây (có gắn quảng cáo)
https://ouo.io/4GZBYx

Hoặc click vào link bên dưới để tải về máy. (vẫn gắn quảng cáo)
https://ouo.io/fg1hoyU