画线 css,用CSS3画的接口线

CSS

语言：

CSSSCSS

确定

.container {

width: 50%;

height: 300px;

position: fixed;

left: 50%;

bottom: 0;

-webkit-transform: translate(-50%, 0%);

transform: translate(-50%, 0%);

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: horizontal;

-webkit-box-direction: normal;

-webkit-flex-direction: row;

-ms-flex-direction: row;

flex-direction: row;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.base {

width: 30%;

min-width: 165px;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: start;

-webkit-justify-content: flex-start;

-ms-flex-pack: start;

justify-content: flex-start;

}

.iphone .common {

background-color: #fff;

border: 4px solid #45505B;

margin-top: -4px;

}

.iphone .metal {

width: 40px;

height: 40px;

background-color: #DADCDF;

border: 4px solid #45505B;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

}

.iphone .metal:after {

content: " ";

display: block;

background-color: #fff;

border: 2px solid #A3A9AE;

width: 20px;

height: 8px;

margin: 5px auto 0;

}

.iphone .face {

width: 55px;

height: 80px;

border-radius: 8px;

position: relative;

}

.iphone .face .smile {

position: absolute;

left: 50%;

top: 25px;

-webkit-transform: translate(-50%, 0%);

transform: translate(-50%, 0%);

width: 20px;

height: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

border: 3px solid #45505B;

border-top: 0;

box-sizing: border-box;

}

.iphone .face .smile:before,

.iphone .face .smile:after {

content: " ";

display: block;

width: 6px;

height: 6px;

background-color: #45505B;

border-radius: 100%;

}

.iphone .face .smile:before {

position: absolute;

left: -12px;

bottom: 5px;

}

.iphone .face .smile:after {

position: absolute;

left: 20px;

bottom: 5px;

}

.iphone .holder {

width: 30px;

height: 40px;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

}

.iphone .cord {

width: 20px;

height: 124px;

border-bottom: none;

}

.hdmi .common {

background-color: #899097;

border: 4px solid #45505B;

margin-top: -4px;

}

.hdmi .metal {

background-color: #DAD1B2;

width: 70px;

height: 55px;

border: 4px solid #45505B;

border-top-left-radius: 12px;

border-top-right-radius: 12px;

position: relative;

}

.hdmi .metal .dent {

width: 40px;

height: 8px;

border-bottom: 2px solid #BCA98F;

margin: 0 auto;

}

.hdmi .metal .dent:before,

.hdmi .metal .dent:after {

content: " ";

display: block;

width: 10px;

border-bottom: 2px solid #BCA98F;

}

.hdmi .metal .dent:before {

-webkit-transform: translate(-8px, 5px) rotate(45deg);

transform: translate(-8px, 5px) rotate(45deg);

}

.hdmi .metal .dent:after {

-webkit-transform: translate(38px, 3px) rotate(315deg);

transform: translate(38px, 3px) rotate(315deg);

}

.hdmi .metal:before,

.hdmi .metal:after {

content: " ";

display: block;

background-color: #BCA98F;

width: 12px;

height: 12px;

}

.hdmi .metal:before {

position: absolute;

left: 12px;

top: 20px;

}

.hdmi .metal:after {

position: absolute;

right: 12px;

top: 20px;

}

.hdmi .face {

width: 100px;

height: 120px;

border-radius: 15px;

border-bottom: none;

position: relative;

}

.hdmi .face .smile {

position: absolute;

left: 50%;

top: 35px;

-webkit-transform: translate(-50%, 0%);

transform: translate(-50%, 0%);

width: 30px;

height: 15px;

background-color: #6C757D;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

border: 3px solid #45505B;

box-sizing: border-box;

}

.hdmi .face .smile:before,

.hdmi .face .smile:after {

content: " ";

display: block;

width: 12px;

height: 12px;

background-color: #45505B;

border-radius: 100%;

}

.hdmi .face .smile:before {

position: absolute;

left: 36px;

bottom: 15px;

}

.hdmi .face .smile:after {

position: absolute;

left: -24px;

bottom: 15px;

}

.hdmi .facebase {

border-top: 80px solid #45505B;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

width: 54px;

margin-top: -9px;

position: relative;

}

.hdmi .facebase:before {

content: " ";

display: block;

border-top: 80px solid #899097;

border-left: 25px solid transparent;

border-right: 25px solid transparent;

width: 48px;

position: absolute;

bottom: 100%;

right: -22.5px;

}

.hdmi .facebase:after {

content: " ";

display: block;

background-color: transparent;

border-bottom: 4px solid #45505B;

border-radius: 50%;

width: 58x;

height: 4px;

margin-top: -4px;

}

.hdmi .holder {

width: 40px;

height: 16px;

border-bottom-left-radius: 12px;

border-bottom-right-radius: 12px;

}

.hdmi .cord {

width: 20px;

height: 22px;

border-bottom: none;

}

.vga .common {

background-color: #84BEF4;

border: 4px solid #45505B;

margin-top: -4px;

}

.vga .metal {

background-color: #DADCDF;

width: 70px;

height: 55px;

border: 4px solid #45505B;

border-top-left-radius: 8px;

border-top-right-radius: 9px;

position: relative;

width: 90px;

height: 30px;

}

.vga .metal .circles {

width: 70%;

height: 100%;

margin: 0 auto;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-justify-content: space-around;

-ms-flex-pack: distribute;

justify-content: space-around;

}

.vga .metal .circles span {

display: block;

width: 9px;

height: 9px;

background-color: #A3A9AE;

border-radius: 100%;

}

.vga .metal .nubs {

position: absolute;

bottom: 0;

}

.vga .metal .nubs:before,

.vga .metal .nubs:after {

content: " ";

display: block;

width: 12px;

height: 12px;

background-color: #DADCDF;

border: 4px solid #45505B;

border-top-left-radius: 8px;

border-top-right-radius: 8px;

margin-bottom: -4px;

}

.vga .metal .nubs:before {

position: absolute;

bottom: 0;

right: 12px;

}

.vga .metal .nubs:after {

position: absolute;

bottom: 0;

left: 102px;

}

.vga .face {

width: 160px;

height: 130px;

border-radius: 12px;

position: relative;

}

.vga .face .smile {

position: absolute;

left: 50%;

top: 35px;

-webkit-transform: translate(-50%, 0%);

transform: translate(-50%, 0%);

width: 30px;

height: 15px;

background-color: #52A5EF;

border-bottom-left-radius: 15px;

border-bottom-right-radius: 15px;

border: 3px solid #45505B;

box-sizing: border-box;

}

.vga .face .smile:before,

.vga .face .smile:after {

content: " ";

display: block;

width: 20px;

height: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

border: 3px solid #45505B;

border-top: 0;

box-sizing: border-box;

}

.vga .face .smile:before {

position: absolute;

left: 42px;

bottom: 15px;

}

.vga .face .smile:after {

position: absolute;

left: -38px;

bottom: 15px;

}

.vga .face .stripes {

margin: 86px auto 0;

width: 80%;

height: 25px;

background-image: -webkit-linear-gradient(top, #52A5EF 25%, #84BEF4 25%, #84BEF4 50%, #52A5EF 50%, #52A5EF 75%, #84BEF4 75%, #84BEF4);

background-image: linear-gradient(to bottom, #52A5EF 25%, #84BEF4 25%, #84BEF4 50%, #52A5EF 50%, #52A5EF 75%, #84BEF4 75%, #84BEF4);

background-size: 20px 20px;

}

.vga .holder {

border-top: 45px solid #45505B;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

width: 54px;

position: relative;

}

.vga .holder:before {

content: " ";

display: block;

border-top: 45px solid #84BEF4;

border-left: 20px solid transparent;

border-right: 20px solid transparent;

width: 48px;

position: absolute;

bottom: 100%;

right: -17px;

}

.vga .holder:after {

content: " ";

display: block;

background-color: transparent;

border-bottom: 4px solid #45505B;

border-radius: 50%;

width: 58x;

height: 4px;

margin-top: -4px;

}

.vga .holder .nubs {

position: absolute;

top: 0;

}

.vga .holder .nubs:before,

.vga .holder .nubs:after {

content: " ";

display: block;

width: 22px;

height: 40px;

background-image: -webkit-linear-gradient(left, #52A5EF 25%, #84BEF4 25%, #84BEF4 50%, #52A5EF 50%, #52A5EF 75%, #84BEF4 75%, #84BEF4);

background-image: linear-gradient(to right, #52A5EF 25%, #84BEF4 25%, #84BEF4 50%, #52A5EF 50%, #52A5EF 75%, #84BEF4 75%, #84BEF4);

background-size: 11px 11px;

border: 4px solid #45505B;

border-bottom-left-radius: 8px;

border-bottom-right-radius: 8px;

margin-bottom: -4px;

}

.vga .holder .nubs:before {

position: absolute;

bottom: 5px;

right: 21px;

}

.vga .holder .nubs:after {

position: absolute;

bottom: 5px;

left: 75px;

}

.vga .cord {

width: 20px;

height: 80px;

background-color: #899097;

border: 4px solid #45505B;

border-bottom: none;

margin-top: -4px;

}