Question

我正在研究导航面板。我在链接上使用了skewX，但它也扭曲了文本。是否可以使文本笔直，如垂直。我尝试<a href.....><p>Assassin's Creed</p></a>然后扭曲文本，但它破坏了显示，

＆＃13;

ul {
	list-style-type: none;
	background-color: rgb(0,0,0);
	margin: 0;
	padding: 0;
	overflow: hidden;
}
li {
	float: left;
}
li a {
	margin: 15px;
	background-color: red;
	display:block;
	border: 2px solid white;
	padding: 12px;
	text-decoration: none;
	color: white;
	cursor: pointer;
	transform: skewX(30deg);
	transition: box-shadow 0.2s, background-color 0.2s;
}
li a:hover {
	box-shadow: 10px 0px 1px cyan, -10px 0px 1px cyan ;
    background-color: black;
}
div a img:hover {
	opacity: 1.0;
	width: 290px;
	margin: 5px 0 0 0;
	box-shadow: 0px 0px 15px blue;
}

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<title>Gallery</title>
		<link rel="stylesheet" href="styles/styleweb.css">
	</head>
	<body>
		<ul>
			<li><a href="som.html"><b>Shadow of Mordor</b></a></li>
			<li><a href="tr.html"><b>Tomb Raider</b></a></li>
			<li><a href="ac.html"><b>Assassin's Creed</b></a></li>
			<li><a href="bf4.html"><b>Battlefield 4</b></a></li>
		</ul>
	</body>
</html>

＆＃13;

Answer 1

用另一种方式反驳文字：

li a b {
    transform: skewX(-30deg);
    display:inline-block;    
}

注意： tranform无效自动内联元素，例如span代码或b代码......所以我们必须将display:property设置为更合适的内容......在这种情况下inline-block。

＆＃13;

ul {
  list-style-type: none;
  background-color: rgb(0, 0, 0);
  margin: 0;
  padding: 0;
  overflow: hidden;
}
li {
  float: left;
}
li a {
  margin: 15px;
  background-color: red;
  display: block;
  border: 2px solid white;
  padding: 12px;
  text-decoration: none;
  color: white;
  cursor: pointer;
  transform: skewX(30deg);
  transition: box-shadow 0.2s, background-color 0.2s;
}
li a b {
  transform: skewX(-30deg);
  display: inline-block;
}
li a:hover {
  box-shadow: 10px 0px 1px cyan, -10px 0px 1px cyan;
  background-color: black;
}
div a img:hover {
  opacity: 1.0;
  width: 290px;
  margin: 5px 0 0 0;
  box-shadow: 0px 0px 15px blue;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Gallery</title>
  <link rel="stylesheet" href="styles/styleweb.css">
</head>

<body>
  <ul>
    <li><a href="som.html"><b>Shadow of Mordor</b></a>
    </li>
    <li><a href="tr.html"><b>Tomb Raider</b></a>
    </li>
    <li><a href="ac.html"><b>Assassin's Creed</b></a>
    </li>
    <li><a href="bf4.html"><b>Battlefield 4</b></a>
    </li>
  </ul>
</body>

</html>

＆＃13;

最后一个注释 .. b标记在这里可能不合适......您应该使用样式化的span代码。

历史上，该元素旨在使文本加粗。自HTML4以来，样式信息已被弃用，因此元素的含义已经改变。

如果使用元素没有语义目的，使用带粗体值的css属性font-weight将是使文本变为粗体的更好选择。

导航面板以平行四边形的形式链接 - 需要直文

1 个答案: