如何实现下图中的效果呢?很简单,今天就交给大家,实现方法很多,我只是将我的实现方法列出,如果有不同的方法或者可优化点,可在评论区指出!
废话不多说,直接贴代码上来。
demo中我用的是div实现,表格中的实现改一下就行,不麻烦。
我主要是通过定位和旋转来进行实现的这个效果,下面是参考代码:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>分割demotitle>
<style type="text/css">
/**{
margin: 0;
padding: 0;
}*/
.box{
border: 1px solid #000000;
overflow: hidden;
position: relative;
width: 100px;
height: 50px;
text-align: right;
font-size: 0.6rem;
}
.line1,.line2{
border-top: solid #000000 1px;
padding-right: 0.7rem;
transform-origin:left top;
position: absolute;
top: 0px;
left: 0px;
}
.line1{
width: 60px;
transform:rotate(45deg);
-ms-transform:rotate(45deg); /* Internet Explorer */
-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* Safari 和 Chrome */
-o-transform:rotate(45deg); /* Opera */
}
.line2{
width: 100px;
transform:rotate(18deg);
-ms-transform:rotate(18deg); /* Internet Explorer */
-moz-transform:rotate(18deg); /* Firefox */
-webkit-transform:rotate(18deg); /* Safari 和 Chrome */
-o-transform:rotate(18deg); /* Opera */
}
style>
head>
<body>
<div class="box">
文字3
<div class="line1">文字1div>
<div class="line2">文字2div>
div>
body>
html>
不多说了,本次做个记录,供大家参考