Question

我需要在按钮上进行三角形聚焦，就像在此图像上一样

我查看了this等不同的示例，但焦点区域是矩形的。

是否可以制作三角形聚焦？

Answer 1

您可以使用apply plugin: 'com.android.application' android { compileSdkVersion 23 buildToolsVersion "23.0.2" defaultConfig { applicationId "com.my.app" minSdkVersion 17 targetSdkVersion 22 versionCode 1 versionName "1.0" ndk { abiFilters "armeabi", "x86", "mips" } } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) final SUPPORT_LIBRARY_VERSION = '23.2.0' final PLAY_SERVICES_VERSION = '8.3.0' final RETROFIT_VERSION = '2.0.0' final OKHTTP3_VERSION = '3.2.0' compile "com.android.support:design:$SUPPORT_LIBRARY_VERSION" compile "com.android.support:support-v4:$SUPPORT_LIBRARY_VERSION" compile "com.android.support:appcompat-v7:$SUPPORT_LIBRARY_VERSION" compile "com.android.support:cardview-v7:$SUPPORT_LIBRARY_VERSION" compile "com.android.support:recyclerview-v7:$SUPPORT_LIBRARY_VERSION" compile "com.squareup.retrofit2:retrofit:$RETROFIT_VERSION" compile "com.squareup.retrofit2:converter-gson:$RETROFIT_VERSION" compile "com.squareup.retrofit2:adapter-rxjava:$RETROFIT_VERSION" compile "com.squareup.okhttp3:logging-interceptor:$OKHTTP3_VERSION" compile 'com.google.code.gson:gson:2.6.2' compile 'com.jakewharton:butterknife:7.0.1' }为clip-path提供三角形形状，并将相同的形状应用于稍微放大的button伪元素，以模仿轮廓，例如

Codepen Demo

注意：仅适用于支持 button::before

的浏览器

<强>标记

clip-path

<强> CSS

<button><span>button</span></button>

Answer 2

您可以使用map代码：http://www.w3schools.com/tags/tag_map.asp

但在这种情况下，你的按钮必须是一张照片。

Answer 3

也许是这样的？在按钮后添加元素以提供三角形形状......

现在旋转45°，你可以通过倾斜来获得另一个角度。

CodePen Sample

button:hover { border-color: blue; }
button:hover:after { border-color: blue;}

button {
  font-size: 14px;
  background: none;
  border: 1px solid red;
  border-right: 0;
  position: relative;
  height: 44px;
  z-index: 1;
  background-color: #FFF;
}
button::after {
  content: "";
  display: block;
  position: absolute;
  width: 30px; height: 30px;
  background: #FFF;
  right: -15px;
  top: 5px;
  transform: rotate(-45deg);
  z-index:-1;
  border-right: 1px solid Red;
  border-bottom: 1px solid Red;
}

Answer 4

有点晚了，

但几乎每个浏览器都可以使用transform和伪。

最终添加背景渐变和阴影：http://codepen.io/gc-nomade/pen/yOjOby

* {
  box-sizing: border-box;
}
a {

  display: inline-block;
  padding: 0.5em 1em;
  margin: 0 1.5em 0 0;
  text-decoration: none;
  color: #177EE5;
  border: solid 3px;
  border-radius: 5px;
  border-right: none;
  position: relative;
  background: linear-gradient(to right, lightgray, white, lightgray);
  box-shadow: 0 0 5px black;
}
a:after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  right: -.8em;
  width: 1.75em;
  border-radius: inherit;
  border-top: solid;
  border-right: solid;
  border-color: inherit;
  transform: rotate(45deg);
  background: linear-gradient(45deg, transparent 45%, lightgray 60%);
  box-shadow: 0px -5px  5px -5px black, 5px 0px  5px -5px black
}

<a href="#">arrow</a>
<a href="#">longer arrow</a>
<a href="#">@</a>

Answer 5

你可以使用这个网站制作三角形，多边形：CSS形状 - CSS-Tricks

https://css-tricks.com/examples/ShapesOfCSS

制作一个css课程。在焦点上添加该类。

http://www.w3schools.com/jquery/html_addclass.asp

如何制作三角形的焦点？

5 个答案: